{% extends "base.html" %}
{% block content %}
  <section class="section"><div class="container">
    <h1 class="title is-4">Group Task Inbox: {{ channel_display_name }}</h1>
    <p class="subtitle is-6">{{ service_label }}</p>
    <article class="box">
      <h2 class="title is-6">Create Or Map Project</h2>
      {% if primary_project %}
        <form method="post" style="margin-bottom: 0.7rem;">
          {% csrf_token %}
          <input type="hidden" name="action" value="group_project_rename">
          <div class="columns is-multiline">
            <div class="column is-7">
              <label class="label is-size-7">Rename Current Chat Project</label>
              <input class="input is-small" name="project_name" value="{{ primary_project.name }}">
            </div>
            <div class="column is-5" style="display:flex; align-items:flex-end;">
              <button class="button is-small is-light" type="submit">Rename</button>
            </div>
          </div>
        </form>
      {% endif %}
      <form method="post" style="margin-bottom: 0.7rem;">
        {% csrf_token %}
        <input type="hidden" name="action" value="group_project_create">
        <div class="columns is-multiline">
          <div class="column is-5">
            <label class="label is-size-7">Project Name</label>
            <input class="input is-small" name="project_name" placeholder="Project name">
          </div>
          <div class="column is-5">
            <label class="label is-size-7">Initial Epic (optional)</label>
            <input class="input is-small" name="epic_name" placeholder="Epic name">
          </div>
          <div class="column is-2" style="display:flex; align-items:flex-end;">
            <button class="button is-small is-link is-light" type="submit">Create + Map</button>
          </div>
        </div>
      </form>
      <form method="post">
        {% csrf_token %}
        <input type="hidden" name="action" value="group_map_existing_project">
        <div class="columns is-multiline">
          <div class="column is-9">
            <label class="label is-size-7">Existing Project</label>
            <div class="select is-small is-fullwidth">
              <select name="project_id">
                {% for project in projects %}
                  <option value="{{ project.id }}">{{ project.name }}</option>
                {% empty %}
                  <option value="">No projects available</option>
                {% endfor %}
              </select>
            </div>
          </div>
          <div class="column is-3" style="display:flex; align-items:flex-end;">
            <button class="button is-small is-light" type="submit">Map Existing</button>
          </div>
        </div>
      </form>
    </article>
    {% if not tasks %}
      <article class="box">
        <h2 class="title is-6">No Tasks Yet</h2>
        <div class="content is-size-7">
          <p>This group has no derived tasks yet. To start populating this view:</p>
          <ol>
            <li>Open <a href="{% url 'tasks_settings' %}?service={{ service }}&identifier={{ identifier|urlencode }}">Task Automation</a> and confirm this chat is mapped under <strong>Group Mapping</strong>.</li>
            <li>Send task-like messages in this group, for example: <code>task: ship v1</code>, <code>todo: write tests</code>, <code>please review PR</code>.</li>
            <li>Mark completion explicitly with a phrase + reference, for example: <code>done #12</code>, <code>completed #12</code>, <code>fixed #12</code>.</li>
            <li>Refresh this page; new derived tasks and events should appear automatically.</li>
          </ol>
        </div>
      </article>
    {% endif %}
    <article class="box">
      <h2 class="title is-6">Mappings</h2>
      <table class="table is-fullwidth is-striped is-size-7">
        <thead><tr><th>Project</th><th>Epic</th><th>Channel</th><th>Enabled</th><th></th></tr></thead>
        <tbody>
          {% for row in mappings %}
            <tr>
              <td>{{ row.project.name }}</td>
              <td>{% if row.epic %}{{ row.epic.name }}{% else %}-{% endif %}</td>
              <td>
                <div>{{ row.display_service_label }} · {{ row.display_channel_name }}</div>
              </td>
              <td>{{ row.enabled }}</td>
              <td><a class="button is-small is-light" href="{% url 'tasks_project' project_id=row.project_id %}">Open Project</a></td>
            </tr>
          {% empty %}
            <tr><td colspan="5">No mappings for this group.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </article>
    <article class="box">
      <h2 class="title is-6">Derived 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>Project</th><th>Status</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_identifier %}
                  <div class="has-text-grey"><code>{{ row.creator_identifier }}</code></div>
                {% endif %}
              </td>
              <td>{{ row.project.name }}{% if row.epic %} / {{ row.epic.name }}{% endif %}</td>
              <td>{{ row.status_snapshot }}</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="6">No tasks yet.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </article>
  </div></section>
{% endblock %}
