{% extends "base.html" %}
{% block content %}
<section class="section"><div class="container">
  <h1 class="title is-4">Group Tasks: {{ channel_display_name }}</h1>
  <p class="subtitle is-6">{{ service_label }} · {{ identifier }}</p>
  <article class="box">
    <h2 class="title is-6">Create Or Map Project</h2>
    <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 Settings</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><code>{{ row.service }} · {{ row.channel_identifier }}</code></div>
                {% if channel_display_name %}
                  <p class="is-size-7 has-text-dark" style="margin-top:0.2rem;">{{ channel_display_name }}</p>
                {% endif %}
              </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>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.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="5">No tasks yet.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </article>
</div></section>
{% endblock %}