{% extends "base.html" %}
{% block content %}
<div class="page-header">
  <h1>Routines</h1>
  <p class="subtitle">Create Garmin planned workouts from your Hevy routines.</p>
</div>

<div class="card" style="margin-bottom:16px;">
  <form hx-post="/api/routines/sync" hx-target="#routines-result" hx-disabled-elt="find button"
        style="display:flex; gap:12px; align-items:center; flex-wrap:wrap;">
    <button type="submit" class="btn btn-primary">Sync all routines</button>
    <label style="display:flex; gap:6px; align-items:center; color:var(--text-muted); font-size:14px;" title="Re-create even routines already synced">
      <input type="checkbox" name="force" value="1"> Force re-create
    </label>
    <span class="htmx-indicator" style="align-items:center; gap:6px; color:var(--text-muted); font-size:14px;">
      <span class="spinner"></span> Syncing…
    </span>
  </form>
  <div id="routines-result" style="margin-top:12px;"></div>
</div>

{% if fetch_error %}
<div class="toast toast-error">Could not load routines: {{ fetch_error }}</div>
{% else %}
<div class="card">
  {% if routines %}
  <table style="width:100%; border-collapse:collapse;">
    <thead>
      <tr style="text-align:left; color:var(--text-muted); font-size:13px;">
        <th style="padding:8px;">Routine</th>
        <th style="padding:8px;">Exercises</th>
        <th style="padding:8px;">Status</th>
        <th style="padding:8px;">Schedule</th>
      </tr>
    </thead>
    <tbody>
      {% for r in routines %}
      <tr style="border-top:1px solid var(--border); vertical-align:top;">
        <td style="padding:8px;">{{ r.title }}</td>
        <td style="padding:8px;">{{ r.exercise_count }}</td>
        <td style="padding:8px;">
          {% if r.synced %}<span style="color:var(--green);">✓ synced</span>
          {% else %}<span style="color:var(--text-muted);">not synced</span>{% endif %}
          {% if r.scheduled_date %}<br><span style="color:var(--text-muted); font-size:12px;">📅 {{ r.scheduled_date }}</span>{% endif %}
        </td>
        <td style="padding:8px;">
          {% if r.synced %}
          <details>
            <summary style="cursor:pointer; user-select:none;" title="Schedule on the Garmin calendar">📅 Schedule</summary>
            <form hx-post="/api/routines/{{ r.id }}/schedule" hx-target="#routines-result" hx-swap="innerHTML" hx-disabled-elt="find button"
                  style="margin-top:8px; display:flex; flex-direction:column; gap:8px; font-size:13px; max-width:320px;">
              <label style="display:flex; gap:6px; align-items:center;">
                <input type="radio" name="mode" value="once" checked> One-off
                <input type="date" name="date"
                       style="background:var(--bg-primary); color:var(--text); border:1px solid var(--border); border-radius:var(--radius-sm); padding:4px 6px;">
              </label>
              <label style="display:flex; gap:6px; align-items:center; flex-wrap:wrap;">
                <input type="radio" name="mode" value="recurring"> Weekly on
                <select name="weekday" style="background:var(--bg-primary); color:var(--text); border:1px solid var(--border); border-radius:var(--radius-sm); padding:4px 6px;">
                  <option value="0">Monday</option>
                  <option value="1">Tuesday</option>
                  <option value="2">Wednesday</option>
                  <option value="3">Thursday</option>
                  <option value="4">Friday</option>
                  <option value="5">Saturday</option>
                  <option value="6">Sunday</option>
                </select>
              </label>
              <label style="display:flex; gap:6px; align-items:center; flex-wrap:wrap; color:var(--text-muted);">
                from <input type="date" name="start_date"
                       style="background:var(--bg-primary); color:var(--text); border:1px solid var(--border); border-radius:var(--radius-sm); padding:4px 6px;">
                for <input type="number" name="weeks" min="1" max="52" value="4" style="width:60px; background:var(--bg-primary); color:var(--text); border:1px solid var(--border); border-radius:var(--radius-sm); padding:4px 6px;"> weeks
              </label>
              <div style="display:flex; gap:8px; align-items:center;">
                <button type="submit" class="btn btn-primary">Add to calendar</button>
                <span class="htmx-indicator" style="align-items:center; gap:6px; color:var(--text-muted);">
                  <span class="spinner"></span> Scheduling…
                </span>
              </div>
            </form>
          </details>
          {% else %}
          <span style="color:var(--text-muted); font-size:12px;">sync first</span>
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <p style="color:var(--text-muted);">No routines found in your Hevy account.</p>
  {% endif %}
</div>
{% endif %}
{% endblock %}