{% extends "base.html" %}
{% block content %}
  <section class="section">
    <div class="container">
      <h1 class="title is-4">Project: {{ project.name }}</h1>
      <div class="buttons" style="margin-bottom: 0.75rem;">
        <a class="button is-small is-light" href="{% url 'tasks_hub' %}">Back</a>
        <form method="post" onsubmit="const v=prompt('Type {{ project.name|escapejs }} to confirm delete'); if(v===null){return false;} this.confirm_name.value=v; return true;">
          {% csrf_token %}
          <input type="hidden" name="action" value="project_delete">
          <input type="hidden" name="confirm_name" value="">
          <button class="button is-small is-danger is-light" type="submit">Delete Project</button>
        </form>
      </div>

      <article class="box">
        <div class="is-flex is-justify-content-space-between is-align-items-center" style="gap: 0.5rem; margin-bottom: 0.6rem;">
          <h2 class="title is-6" style="margin: 0;">Epics</h2>
          <span class="tag task-ui-badge">{{ epics|length }}</span>
        </div>
        <form method="post" style="margin-bottom: 0.75rem;">
          {% csrf_token %}
          <input type="hidden" name="action" value="epic_create">
          <div class="field has-addons">
            <div class="control is-expanded">
              <input class="input is-small" name="name" placeholder="New epic name">
            </div>
            <div class="control">
              <button class="button is-small is-link is-light" type="submit">Add Epic</button>
            </div>
          </div>
        </form>
        <table class="table is-fullwidth is-striped is-size-7">
          <thead><tr><th>Epic</th><th>Tasks</th><th></th></tr></thead>
          <tbody>
            {% for epic in epics %}
              <tr>
                <td><a href="{% url 'tasks_epic' epic_id=epic.id %}">{{ epic.name }}</a></td>
                <td><span class="tag task-ui-badge">{{ epic.task_count }}</span></td>
                <td class="has-text-right">
                  <form method="post">
                    {% csrf_token %}
                    <input type="hidden" name="action" value="epic_delete">
                    <input type="hidden" name="epic_id" value="{{ epic.id }}">
                    <button class="button is-small is-danger is-light" type="submit">Delete</button>
                  </form>
                </td>
              </tr>
            {% empty %}
              <tr><td colspan="3">No epics.</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </article>

      <article class="box">
        <h2 class="title is-6">Tasks</h2>
        <table class="table is-fullwidth is-striped is-size-7">
          <thead><tr><th>Ref</th><th>Title</th><th>Created By</th><th>Epic</th><th></th></tr></thead>
          <tbody>
            {% for row in tasks %}
              <tr>
                <td>#{{ row.reference_code }}</td>
                <td>{{ row.title }}</td>
                <td>
                  {{ row.creator_label|default:"Unknown" }}
                  {% if row.creator_compose_href %}
                    <div><a class="is-size-7" href="{{ row.creator_compose_href }}">Compose</a></div>
                  {% endif %}
                </td>
                <td>
                  <form method="post" class="is-flex" style="gap: 0.35rem; align-items: center;">
                    {% csrf_token %}
                    <input type="hidden" name="action" value="task_set_epic">
                    <input type="hidden" name="task_id" value="{{ row.id }}">
                    <div class="select is-small">
                      <select name="epic_id">
                        <option value="">No epic</option>
                        {% for epic in epics %}
                          <option value="{{ epic.id }}" {% if row.epic_id == epic.id %}selected{% endif %}>{{ epic.name }}</option>
                        {% endfor %}
                      </select>
                    </div>
                    <button class="button is-small is-light" type="submit">Set</button>
                  </form>
                </td>
                <td><a class="button is-small is-light" href="{% url 'tasks_task' task_id=row.id %}">Open</a></td>
              </tr>
            {% empty %}
              <tr><td colspan="5">No tasks.</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </article>
    </div>
  </section>
{% endblock %}