{% extends "base.html" %}

{% block content %}
  <div class="row g-4">
    <div class="col-12 col-lg-3">
      <div class="card shadow-sm mb-3">
        {% if surface == "profile_team" or surface == "profile_team_repo" %}
          {% with profile_nav_active="teams" %}
            {% include "partials/profile_sidebar.html" %}
          {% endwith %}
        {% elif surface == "profile_personal_repo" %}
          {% with profile_nav_active="repos" %}
            {% include "partials/profile_sidebar.html" %}
          {% endwith %}
        {% elif surface == "staff_team" %}
          {% with staff_nav_active="teams" %}
            {% include "partials/staff_sidebar.html" %}
          {% endwith %}
        {% else %}
          {% with staff_nav_active="repos" %}
            {% include "partials/staff_sidebar.html" %}
          {% endwith %}
        {% endif %}
      </div>
    </div>
    <div class="col-12 col-lg-9">
      {% include "partials/breadcrumbs.html" %}

      {% if surface == "profile_team" %}
        {% with profile_team_tabs_active="timers", can_manage_timers=true %}
          {% include "profile/team_tabs.html" %}
        {% endwith %}
      {% elif surface == "profile_personal_repo" %}
        {% with profile_repo_subnav_active="timers" %}
          {% include "profile/personal_repo_subnav.html" %}
        {% endwith %}
      {% elif surface == "profile_team_repo" %}
        {% with profile_repo_subnav_active="timers" %}
          {% include "profile/team_repo_subnav.html" %}
        {% endwith %}
      {% elif surface == "staff_team" %}
        {% with team_tabs_base="/staff/teams/" ~ team.uuid, team_tabs_active="timers" %}
          {% include "partials/team_tabs.html" %}
        {% endwith %}
      {% elif surface == "staff_repo" %}
        {% with staff_repo_subnav_active="timers" %}
          {% include "staff/repo_subnav.html" %}
        {% endwith %}
      {% endif %}

      {% if notice %}<div class="alert alert-success">{{ notice }}</div>{% endif %}
      {% if error %}<div class="alert alert-danger">{{ error }}</div>{% endif %}

      {% if mode == "list" %}
        <form id="timer-filters" method="get" action="{{ base_url }}"></form>
        <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
          <div>
            <h1 class="h3 mb-1">{{ scope_title }}</h1>
            <p class="text-muted mb-0">Events scheduled for this scope.</p>
          </div>
          {% if can_manage %}<a class="btn btn-primary" href="{{ base_url }}/new">Create timer</a>{% endif %}
        </div>
        <div class="card shadow-sm">
          <div class="card-body p-0">
            {% if page.results | length == 0 %}
              <p class="text-muted m-3">No timers yet. A timer emits an event carrying its message, either once or on a repeat.</p>
            {% else %}
              <div class="table-responsive">
                <table class="table table-sm align-middle mb-0">
                  <thead>
                    <tr>
                      <th>Message</th>
                      <th>Schedule</th>
                      <th>Status</th>
                      <th>Next Run</th>
                      <th>Runs</th>
                      {% if can_manage %}<th class="text-end">Actions</th>{% endif %}
                    </tr>
                  </thead>
                  <tbody>
                    {% for timer in page.results %}
                      <tr>
                        <td class="pearing-timer-message">{{ timer.message }}</td>
                        <td><span class="text-body-secondary">{{ timer.schedule }}</span></td>
                        <td>
                          {% if timer.status == "active" %}
                            <span class="badge text-bg-success">Active</span>
                          {% elif timer.status == "paused" %}
                            <span class="badge text-bg-warning">Paused</span>
                          {% elif timer.status == "completed" %}
                            <span class="badge text-bg-secondary">Completed</span>
                          {% else %}
                            <span class="badge text-bg-secondary">Cancelled</span>
                          {% endif %}
                        </td>
                        <td>
                          {% if timer.next_run_at %}
                            <span class="text-body-secondary small">{{ timer.next_run_at }}</span>
                          {% else %}
                            <span class="text-body-secondary small">&mdash;</span>
                          {% endif %}
                        </td>
                        <td>{{ timer.run_count }}</td>
                        {% if can_manage %}
                          <td class="text-end">
                            <div class="d-flex gap-2 justify-content-end">
                              <a class="btn btn-sm btn-outline-secondary" href="{{ base_url }}/{{ timer.uuid }}">Edit</a>
                              <form method="post" action="{{ base_url }}/{{ timer.uuid }}/delete" data-confirm-modal="confirm-delete-timer" data-confirm-name="{{ timer.message }}">
                                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                                <button class="btn btn-sm btn-outline-danger" type="submit">Delete</button>
                              </form>
                            </div>
                          </td>
                        {% endif %}
                      </tr>
                    {% endfor %}
                  </tbody>
                </table>
              </div>
            {% endif %}
          </div>
          {% with page=page, query=query, per_page_id="timers-per-page", per_page_form="timer-filters" %}
            {% include "partials/paging_footer.html" %}
          {% endwith %}
        </div>
        {% if can_manage %}
          {% with
            modal_id="confirm-delete-timer",
            modal_title="Delete timer",
            modal_body='Delete <span class="fw-semibold" data-confirm-name></span>?',
            modal_confirm_text="Delete timer",
            modal_desc="This timer will be removed and will not fire again."
          %}
            {% include "partials/confirm_modal.html" %}
          {% endwith %}
        {% endif %}
      {% else %}
        <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
          <div>
            <h1 class="h3 mb-1">{% if mode == "new" %}Create timer{% else %}Edit timer{% endif %}</h1>
            <p class="text-muted mb-0">Emit a scoped event once or on a repeating schedule.</p>
          </div>
          <a class="btn btn-outline-secondary" href="{{ base_url }}">Back to timers</a>
        </div>
        <div class="row g-3">
          <div class="col-12 col-lg-8">
            <div class="card shadow-sm">
              <div class="card-body">
                <form method="post" action="{{ action_url }}">
                  <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                  <div class="row g-3">
                    {% with is_new=mode == "new" %}
                      {% include "partials/timer_form_fields.html" %}
                    {% endwith %}
                  </div>
                  <div class="mt-4 d-flex gap-2">
                    <button class="btn btn-primary" type="submit">{% if mode == "new" %}Create Timer{% else %}Save Changes{% endif %}</button>
                    <a class="btn btn-outline-secondary" href="{{ base_url }}">Cancel</a>
                  </div>
                </form>
              </div>
            </div>
          </div>
          {% if mode == "edit" and timer %}
            <div class="col-12 col-lg-4">
              <div class="card shadow-sm">
                <div class="card-body">
                  <div class="text-uppercase text-muted small fw-semibold mb-2">Current Schedule</div>
                  <p class="mb-2">{{ timer.schedule }}</p>
                  <dl class="row mb-0 small">
                    <dt class="col-5 text-body-secondary">Next run</dt>
                    <dd class="col-7">{% if timer.next_run_at %}{{ timer.next_run_at }}{% else %}&mdash;{% endif %}</dd>
                    <dt class="col-5 text-body-secondary">Last run</dt>
                    <dd class="col-7">{% if timer.last_run_at %}{{ timer.last_run_at }}{% else %}&mdash;{% endif %}</dd>
                    <dt class="col-5 text-body-secondary">Times fired</dt>
                    <dd class="col-7">{{ timer.run_count }}</dd>
                  </dl>
                </div>
              </div>
            </div>
          {% endif %}
        </div>
      {% endif %}
    </div>
  </div>
{% endblock %}