{% extends "base.html" %}

{% block title %}Set up calendar write-back — calrs{% endblock %}

{% block content %}
<a href="/dashboard" class="back-link">&larr; Back to dashboard</a>

<div class="card">
  <h1>Where should bookings go?</h1>
  <p style="color: var(--text-secondary); margin-bottom: 1.5rem;">
    When someone books a meeting with you, calrs can automatically create the event in your calendar.
    Pick which calendar to write bookings to for <strong>{{ source_name }}</strong>.
  </p>

  <form method="post" action="/dashboard/sources/{{ source_id }}/write-calendar">
    <div style="display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem;">
      {% for cal in calendars %}
      <label style="display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: border-color 0.15s;">
        <input type="radio" name="calendar_href" value="{{ cal.href }}" {% if loop.first %}checked{% endif %} style="accent-color: var(--accent);">
        {% if cal.color %}
        <span style="width: 12px; height: 12px; border-radius: 50%; background: {{ cal.color }}; flex-shrink: 0;"></span>
        {% endif %}
        <span>{{ cal.name }}</span>
        <span style="color: var(--text-muted); font-size: 0.8rem;">{{ cal.event_count }} event{{ "s" if cal.event_count != 1 }}</span>
      </label>
      {% endfor %}
    </div>

    <div style="display: flex; gap: 0.75rem; align-items: center;">
      <button type="submit" class="slot-btn" style="background: var(--accent); color: #fff; border: none; padding: 0.5rem 1.5rem; border-radius: var(--radius); font-size: 0.95rem; cursor: pointer;">Save</button>
      <a href="/dashboard" style="color: var(--text-muted); text-decoration: none; font-size: 0.9rem;">Skip for now</a>
    </div>
  </form>
</div>

{% if sync_messages %}
<div class="card" style="margin-top: 1rem;">
  <h2 style="font-size: 1rem;">Sync results</h2>
  <div style="padding: 0.75rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.85rem; white-space: pre-line; font-family: inherit;">{{ sync_messages }}</div>
</div>
{% endif %}
{% endblock %}