{% extends "base.html" %}

{% block content %}
<section class="section">
  <div class="container">
    <h1 class="title is-4">Availability Settings</h1>
    <form method="post" class="box">
      {% csrf_token %}
      <div class="columns is-multiline">
        <div class="column is-3"><label class="checkbox"><input type="checkbox" name="enabled" {% if settings_row.enabled %}checked{% endif %}> Enabled</label></div>
        <div class="column is-3"><label class="checkbox"><input type="checkbox" name="show_in_chat" {% if settings_row.show_in_chat %}checked{% endif %}> Show In Chat</label></div>
        <div class="column is-3"><label class="checkbox"><input type="checkbox" name="show_in_groups" {% if settings_row.show_in_groups %}checked{% endif %}> Show In Groups</label></div>
        <div class="column is-3"><label class="checkbox"><input type="checkbox" name="inference_enabled" {% if settings_row.inference_enabled %}checked{% endif %}> Inference Enabled</label></div>
        <div class="column is-3">
          <label class="label is-size-7">Retention Days</label>
          <input class="input is-small" type="number" min="1" name="retention_days" value="{{ settings_row.retention_days }}">
        </div>
        <div class="column is-3">
          <label class="label is-size-7">Fade Threshold (seconds)</label>
          <input class="input is-small" type="number" min="30" name="fade_threshold_seconds" value="{{ settings_row.fade_threshold_seconds }}">
        </div>
      </div>
      <button class="button is-link is-small" type="submit">Save</button>
    </form>

    <form method="get" class="box">
      <h2 class="title is-6">Timeline Filters</h2>
      <div class="columns is-multiline">
        <div class="column is-3">
          <label class="label is-size-7">Person</label>
          <div class="select is-small is-fullwidth">
            <select name="person">
              <option value="">All</option>
              {% for person in people %}
                <option value="{{ person.id }}" {% if filters.person == person.id|stringformat:"s" %}selected{% endif %}>{{ person.name }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
        <div class="column is-2">
          <label class="label is-size-7">Service</label>
          <div class="select is-small is-fullwidth">
            <select name="service">
              <option value="">All</option>
              {% for item in service_choices %}
                <option value="{{ item }}" {% if filters.service == item %}selected{% endif %}>{{ item }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
        <div class="column is-2">
          <label class="label is-size-7">State</label>
          <div class="select is-small is-fullwidth">
            <select name="state">
              <option value="">All</option>
              {% for item in state_choices %}
                <option value="{{ item }}" {% if filters.state == item %}selected{% endif %}>{{ item }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
        <div class="column is-2">
          <label class="label is-size-7">Source</label>
          <div class="select is-small is-fullwidth">
            <select name="source_kind">
              <option value="">All</option>
              {% for item in source_kind_choices %}
                <option value="{{ item }}" {% if filters.source_kind == item %}selected{% endif %}>{{ item }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
        <div class="column is-2">
          <label class="label is-size-7">Start (ISO)</label>
          <input class="input is-small" type="datetime-local" name="start" value="{{ filters.start }}">
        </div>
        <div class="column is-2">
          <label class="label is-size-7">End (ISO)</label>
          <input class="input is-small" type="datetime-local" name="end" value="{{ filters.end }}">
        </div>
      </div>
      <button class="button is-light is-small" type="submit">Apply</button>
    </form>

    <div class="box">
      <h2 class="title is-6">Availability Events</h2>
      <table class="table is-fullwidth is-striped is-size-7">
        <thead><tr><th>ts</th><th>person</th><th>service</th><th>source</th><th>state</th><th>confidence</th></tr></thead>
        <tbody>
          {% for row in events %}
            <tr>
              <td>{{ row.ts }}</td>
              <td>{{ row.person.name }}</td>
              <td>{{ row.service }}</td>
              <td>{{ row.source_kind }}</td>
              <td>{{ row.availability_state }}</td>
              <td>{{ row.confidence|floatformat:2 }}</td>
            </tr>
          {% empty %}
            <tr><td colspan="6">No events in range.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <div class="box">
      <h2 class="title is-6">Availability Spans</h2>
      <table class="table is-fullwidth is-striped is-size-7">
        <thead><tr><th>person</th><th>service</th><th>state</th><th>start</th><th>end</th><th>confidence</th></tr></thead>
        <tbody>
          {% for row in spans %}
            <tr>
              <td>{{ row.person.name }}</td>
              <td>{{ row.service }}</td>
              <td>{{ row.state }}</td>
              <td>{{ row.start_ts }}</td>
              <td>{{ row.end_ts }}</td>
              <td>{{ row.confidence_start|floatformat:2 }} -> {{ row.confidence_end|floatformat:2 }}</td>
            </tr>
          {% empty %}
            <tr><td colspan="6">No spans in range.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</section>
{% endblock %}