{% extends "base.html" %}

{% block title %}{{ 'New' if is_new else 'Edit' }} reminder — Courant{% endblock %}

{% block content %}
<div class="flex justify-center pt-12">
  <div class="panel panel-wide w-full">
    <h1 class="display-1 mb-6">{{ 'New' if is_new else 'Edit' }} reminder</h1>

    <form method="post"
          action="{{ '/reminders' if is_new else '/reminders/' ~ reminder.id }}"
          class="space-y-5">

      <div>
        <label class="block mb-1">Name</label>
        <input name="name" type="text" required value="{{ reminder.name if reminder else '' }}">
      </div>

      <div>
        <label class="block mb-1">Message</label>
        <input name="message" type="text" required value="{{ reminder.message if reminder else '' }}">
      </div>

      <div class="grid grid-cols-2 gap-4">
        <div>
          <label class="block mb-1">Icon (emoji)</label>
          <input name="icon" type="text" maxlength="4" value="{{ reminder.icon if reminder else '' }}">
        </div>
        <div>
          <label class="block mb-1">Every X minutes</label>
          <input name="interval_minutes" type="number" min="1" required
                 value="{{ reminder.interval_minutes if reminder else 45 }}">
        </div>
      </div>

      <div class="grid grid-cols-2 gap-4">
        <div>
          <label class="block mb-1">Active from</label>
          <input name="active_hours_start" type="time" required
                 value="{{ '%02d:%02d'|format(reminder.active_hours[0].hour, reminder.active_hours[0].minute) if reminder else '09:00' }}">
        </div>
        <div>
          <label class="block mb-1">Active until</label>
          <input name="active_hours_end" type="time" required
                 value="{{ '%02d:%02d'|format(reminder.active_hours[1].hour, reminder.active_hours[1].minute) if reminder else '18:00' }}">
        </div>
      </div>

      <div>
        <label class="block mb-1">Active days (comma-separated)</label>
        <input name="active_days" type="text" value="{{ active_days_csv }}">
        <p class="text-xs mt-1" style="color: var(--text-muted)">
          Use abbreviations : mon, tue, wed, thu, fri, sat, sun
        </p>
      </div>

      <div class="border-t border-white/10 pt-4">
        <label class="flex items-center gap-2 cursor-pointer">
          <input type="checkbox" name="tracked" value="on"
                 {% if reminder and reminder.tracked %}checked{% endif %}>
          <span>Track progress toward a daily goal</span>
        </label>
      </div>

      <div class="grid grid-cols-3 gap-4">
        <div>
          <label class="block mb-1">Unit label</label>
          <input name="unit_label" type="text" placeholder="glass, cup..."
                 value="{{ reminder.unit_label if reminder and reminder.unit_label else '' }}">
        </div>
        <div>
          <label class="block mb-1">Unit amount</label>
          <input name="unit_amount" type="number" min="1" placeholder="250"
                 value="{{ reminder.unit_amount if reminder and reminder.unit_amount else '' }}">
        </div>
        <div>
          <label class="block mb-1">Daily goal</label>
          <input name="daily_goal" type="number" min="1" placeholder="8"
                 value="{{ reminder.daily_goal if reminder and reminder.daily_goal else '' }}">
        </div>
      </div>

      <div class="flex gap-3 pt-4 border-t border-white/10">
        <button type="submit" class="btn-cozy btn-cozy-primary">
          {{ 'Create' if is_new else 'Save' }}
        </button>
        <a href="/reminders" class="btn-cozy">Cancel</a>
      </div>
    </form>
  </div>
</div>
{% endblock %}