{% 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">
        {% csrf_token %}
        <input type="hidden" name="action" value="project_delete">
        <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 is-light">{{ 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 is-light">{{ 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>Epic</th><th></th></tr></thead>
        <tbody>
          {% for row in tasks %}
            <tr>
              <td>#{{ row.reference_code }}</td>
              <td>{{ row.title }}</td>
              <td>{% if row.epic %}{{ row.epic.name }}{% else %}-{% endif %}</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="4">No tasks.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </article>
  </div>
</section>
{% endblock %}