TPL_AVAIL_BODY = """
<section class="grid gap-6">
  <div class="rounded-2xl border border-slate-800 bg-slate-900/60 p-4">
    <h1 class="text-xl font-bold mb-3">Your Weekly Availability</h1>
    <form method="post" class="overflow-x-auto">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <table class="min-w-full text-sm">
        <thead class="text-slate-300">
          <tr>
            <th class="py-2 pr-4 text-left font-medium">Day</th>
            <th class="py-2 px-2 text-left font-medium">Available</th>
            <th class="py-2 px-2 text-left font-medium">Start</th>
            <th class="py-2 px-2 text-left font-medium">End</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-slate-800">
          {% for key,label in day_names %}
          <tr>
            <td class="py-2 pr-4"><strong>{{ label }}</strong></td>
            <td class="py-2 px-2"><input type="checkbox" name="{{ key }}_avail" {{ 'checked' if week[key].avail else '' }}></td>
            <td class="py-2 px-2"><input type="time" name="{{ key }}_start" value="{{ week[key].start }}" class="px-2 py-1 rounded bg-slate-950 border border-slate-700"></td>
            <td class="py-2 px-2"><input type="time" name="{{ key }}_end"   value="{{ week[key].end }}"   class="px-2 py-1 rounded bg-slate-950 border border-slate-700"></td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      <div class="mt-3 flex items-center gap-2">
        <button class="px-4 py-2 rounded-lg bg-brand-600 hover:bg-brand-700 font-semibold" type="submit">Save Availability</button>
        <span class="text-xs text-slate-400">Tip: Use the links in the header to request a specific day off or fill out Secret Santa.</span>
      </div>
    </form>
  </div>
</section>
"""