{% extends "campermode/base.html" %}

{% block title %}Timers — CamperMode{% endblock %}

{% block content %}
{% set day_labels = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] %}
<div class="container py-3">

  {# Create New Clima Timer #}
  <div class="card mb-3">
    <div class="card-header fw-semibold">Create New Clima Timer</div>
    <div class="card-body">
      <form method="post" action="{{ url_for('timers') }}"
            id="timers-create-form">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

        <div class="mb-3">
          <label for="timer_time" class="form-label">Time</label>
          <input type="time" class="form-control" id="timer_time"
                 name="time" value="12:00" required>
        </div>

        <div class="mb-3">
          <label class="form-label">Days of Week</label>
          <div class="d-flex flex-wrap gap-2">
            {% for i in range(7) %}
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="checkbox"
                     id="dow_{{ i }}" name="days_of_week" value="{{ i }}">
              <label class="form-check-label" for="dow_{{ i }}">
                {{ day_labels[i] }}
              </label>
            </div>
            {% endfor %}
          </div>
        </div>

        <div class="form-check mb-3">
          <input class="form-check-input" type="checkbox"
                 id="repeat_weekly" name="repeat_weekly" value="1" checked>
          <label class="form-check-label" for="repeat_weekly">
            Repeat every week
          </label>
        </div>

        <button type="submit" class="btn btn-primary w-100">
          Create Timer
        </button>
      </form>
    </div>
  </div>

  {# Timer list #}
  {% if timers %}
  {% for timer in timers %}
  <div class="card mb-2">
    <div class="card-body d-flex align-items-center justify-content-between gap-2">
      <div class="flex-grow-1">
        <div class="fw-semibold fs-5">{{ timer.time.strftime("%H:%M") }}</div>
        <div class="d-flex flex-wrap gap-1 mt-1">
          {% for i in range(7) %}
          <span class="badge {% if i in timer.days_of_week %}bg-primary{% else %}bg-secondary opacity-25{% endif %}">
            {{ day_labels[i] }}
          </span>
          {% endfor %}
        </div>
        <div class="text-muted small mt-1">
          {% if timer.repeat_weekly %}Weekly{% else %}One-time{% endif %}
        </div>
      </div>
      <div class="d-flex gap-1">
        <form method="post"
              action="{{ url_for('timers_toggle', timer_id=timer.id) }}">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <button type="submit"
                  class="btn btn-sm {% if timer.enabled %}btn-success{% else %}btn-outline-secondary{% endif %}"
                  title="{% if timer.enabled %}Enabled — click to disable{% else %}Disabled — click to enable{% endif %}">
            <i class="bi {% if timer.enabled %}bi-toggle-on{% else %}bi-toggle-off{% endif %}"></i>
          </button>
        </form>
        <form method="post"
              action="{{ url_for('timers_delete', timer_id=timer.id) }}">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <button type="submit" class="btn btn-sm btn-outline-danger"
                  title="Delete timer"
                  onclick="return confirm('Delete this timer?')">
            <i class="bi bi-trash"></i>
          </button>
        </form>
      </div>
    </div>
  </div>
  {% endfor %}
  {% else %}
  <p class="text-muted text-center mt-3">No timers created yet.</p>
  {% endif %}

</div>

<script>
  document.getElementById('timers-create-form').addEventListener('submit', function (e) {
    var checked = this.querySelectorAll('input[name="days_of_week"]:checked');
    if (checked.length === 0) {
      e.preventDefault();
      alert('Please select at least one day of the week.');
    }
  });
</script>
{% endblock %}