{% extends "layouts/main.html" %}
{% block title %}{{ t(key="board.title", default="게시판") }} — FuzionX{% endblock %}
{% block content %}
<div class="container">
  <div class="glass-card">
    <div class="page-header">
      <h1 class="page-title">{{ t(key="board.title", default="게시판") }}</h1>
      <a href="/board/new" class="btn btn-primary">{{ t(key="btn.new_post", default="새 글") }}</a>
    </div>

    <div class="post-list">
      {% for post in posts %}
      <a href="/board/{{ post.id }}" class="post-card">
        {% if post.thumbUrl %}
        <div class="post-card-thumb">
          <img src="{{ post.thumbUrl }}" alt="{{ post.title }}" loading="lazy">
        </div>
        {% endif %}
        <div class="post-card-body">
          <h3 class="post-card-title">
            {% if post.status == "processing" %}<span class="badge badge-processing">🔄 {{ t(key="board.processing", default="처리중") }}</span> {% endif %}{{ post.title }}
          </h3>
          <div class="post-card-meta">
            <span>{{ post.user_name | default(value="-") }}</span>
            <span>{{ post.created_at }}</span>
          </div>
        </div>
      </a>
      {% endfor %}
      {% if not posts or posts | length == 0 %}
      <div class="post-list-empty">{{ t(key="board.empty", default="게시글이 없습니다.") }}</div>
      {% endif %}
    </div>

    {% set baseUrl = "/board" %}
    {% include "partials/pagination.html" %}
  </div>
</div>

{# processing 게시글이 있으면 REST 폴링으로 상태 확인 #}
<script>
(function() {
  var badges = document.querySelectorAll('.badge-processing');
  if (!badges.length) return;

  // processing post ID 수집 (부모 .post-card의 href에서 추출)
  var ids = [];
  badges.forEach(function(b) {
    var card = b.closest('.post-card');
    if (card) {
      var m = card.getAttribute('href').match(/\/board\/(\d+)/);
      if (m) ids.push(m[1]);
    }
  });
  if (!ids.length) return;

  var timer = setInterval(function() {
    aspFetch('/api/board/status?ids=' + ids.join(','))
      .then(function(res) {
        if (!res || !res.statuses) return;
        var allDone = true;
        for (var i = 0; i < ids.length; i++) {
          if (res.statuses[ids[i]] === 'processing') { allDone = false; break; }
        }
        if (allDone) {
          clearInterval(timer);
          location.reload();
        }
      });
  }, 5000);
})();
</script>
{% endblock %}