{% extends "base.html" %}
{% block title %}Google Calendar — {{ club.name }}{% endblock %}

{% block content %}
{% include "club_ribbon.html" %}

{% if not google_calendar_configured %}
  <div class="alert alert-warning text-dark">
    <i class="bi bi-exclamation-triangle"></i>
    Google Calendar is not configured on this site. Contact your site administrator.
  </div>

{% elif not club.google_calendar_connected %}
  {# Not connected yet #}
  <div class="card mb-4">
    <div class="card-header">Connect Google Calendar</div>
    <div class="card-body">
      <p class="text-muted">
        Connect your club's Google account and we'll make a calendar called
        &ldquo;{{ club.name }} events&rdquo; in it. From then on your auctions and events appear
        there automatically, and anything you add in Google Calendar shows up on your club page.
      </p>
      <p class="text-muted small">
        We can only see and change the calendar we create &mdash; not the rest of your Google account.
      </p>
      <a href="{% url 'google_calendar_connect' club.slug %}" class="btn btn-primary">
        <i class="bi bi-google"></i> Connect Google Calendar
      </a>
    </div>
  </div>

{% else %}
  {# Connected #}
  {% if not club.google_calendar_is_public %}
  {% comment %}
  Setup guidance, not an error — the site's own iCal feed already works, so this uses the
  documented "do this first" bg-primary banner rather than alert-warning. This has to be a
  {% templatetag openblock %} comment {% templatetag closeblock %} block: Django's
  {% templatetag openbrace %}# … #{% templatetag closebrace %} form is single-line only, and a
  two-line one renders onto the page.
  {% endcomment %}
  <div class="mt-2 mb-4 p-3 bg-primary text-white rounded bg-gradient bg-opacity-50">
    <h5><i class="bi bi-people"></i> One more step to let members subscribe</h5>
    <p class="mb-2">
      Your calendar is syncing, but it's still private, so members can't add it to their own
      Google Calendar yet. We can't make it public for you &mdash; that would mean asking for
      access to all of your calendars instead of just this one.
    </p>
    <a href="#share-with-members" class="btn btn-sm btn-light">Show me how &mdash; takes a minute</a>
  </div>
  {% endif %}
  <div class="card mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
      <span>Google Calendar connection</span>
      <span class="badge bg-success text-dark"><i class="bi bi-check-circle-fill"></i> Connected</span>
    </div>
    <div class="card-body">
      <dl class="row mb-0">
        <dt class="col-sm-4">Google account</dt>
        <dd class="col-sm-8">{{ club.google_calendar_account_email|default:"—" }}</dd>
        <dt class="col-sm-4">Calendar</dt>
        <dd class="col-sm-8">
          {{ club.name }} events
          {% if club.google_calendar_public_url %}
          &mdash; <a href="{{ club.google_calendar_public_url }}" target="_blank" rel="noopener">open in Google Calendar</a>
          {% endif %}
        </dd>
        <dt class="col-sm-4">Upcoming events</dt>
        <dd class="col-sm-8">{{ upcoming_count }}{% if auction_event_count %} ({{ auction_event_count }} from auctions){% endif %}</dd>
        <dt class="col-sm-4">Last sync</dt>
        <dd class="col-sm-8">{{ club.google_calendar_last_sync|default:"—" }}</dd>
      </dl>
      <p class="text-muted small mt-3 mb-0">
        <i class="bi bi-info-circle"></i>
        Changes sync both ways every 15 minutes, and immediately when you add an event here.
      </p>
      {% if club.google_calendar_last_error %}
        <div class="alert alert-danger mt-3 mb-0 small">
          <i class="bi bi-exclamation-triangle-fill"></i> Last error: {{ club.google_calendar_last_error }}
        </div>
      {% endif %}
    </div>
    <div class="card-footer">
      <form method="post" action="{% url 'google_calendar_sync_now' club.slug %}" class="d-inline">
        {% csrf_token %}
        <button type="submit" class="btn btn-secondary btn-sm">
          <i class="bi bi-arrow-clockwise"></i> Sync now
        </button>
      </form>
      <form method="post" action="{% url 'google_calendar_disconnect' club.slug %}" class="d-inline"
            data-confirm="The calendar itself stays in your Google account, but events will stop syncing to it. Reconnecting the same Google account later picks up that calendar again, so members who subscribed to it keep it."
            data-confirm-title="Disconnect Google Calendar?"
            data-confirm-ok="Disconnect"
            data-confirm-variant="danger">
        {% csrf_token %}
        <button type="submit" class="btn btn-outline-danger btn-sm">
          <i class="bi bi-x-circle"></i> Disconnect
        </button>
      </form>
    </div>
  </div>

  <div class="card mb-4" id="share-with-members">
    <div class="card-header">
      Share it with your members
      {% if club.google_calendar_is_public %}
      <span class="badge bg-success text-dark ms-1"><i class="bi bi-check-circle-fill"></i> Public</span>
      {% else %}
      <span class="badge bg-secondary ms-1">Private</span>
      {% endif %}
    </div>
    <div class="card-body">
      <p class="text-muted">
        Your club page already offers a
        <a href="{% url 'club_events_ical' club.slug %}">subscribe link</a> that works in Google
        Calendar, Apple Calendar and Outlook. You don't have to do anything else.
      </p>
      <p class="text-muted mb-2">
        If you'd also like members to subscribe to the Google calendar itself, make it public in
        Google Calendar &mdash; we can't do it for you, because that would mean asking for access
        to <em>all</em> of your calendars rather than just this one:
      </p>
      <ol class="text-muted small">
        <li>Open <a href="https://calendar.google.com/calendar/r/settings" target="_blank" rel="noopener">Google Calendar settings</a>.</li>
        <li>Pick <strong>{{ club.name }} events</strong> from the list on the left.</li>
        <li>Under <strong>Access permissions for events</strong>, tick <strong>Make available to public</strong>.</li>
        <li>Come back here and tick the box below.</li>
      </ol>
      {% if club.google_calendar_is_public %}
      <div class="d-flex flex-wrap gap-2">
        <a href="{{ club.google_calendar_public_url }}" target="_blank" rel="noopener" class="btn btn-sm btn-secondary">
          <i class="bi bi-google"></i> Google Calendar link
        </a>
        <a href="{{ club.google_calendar_ical_url }}" target="_blank" rel="noopener" class="btn btn-sm btn-secondary">
          <i class="bi bi-calendar-week"></i> Google iCal feed
        </a>
      </div>
      {% endif %}
    </div>
  </div>
{% endif %}

<div class="card mb-4">
  <div class="card-header">Event settings</div>
  <div class="card-body">
    <form method="post">
      {% csrf_token %}
      <div class="form-check form-switch mb-3">
        <input class="form-check-input" type="checkbox" role="switch" id="add_auctions_to_calendar"
               name="add_auctions_to_calendar" {% if club.add_auctions_to_calendar %}checked{% endif %}>
        <label class="form-check-label" for="add_auctions_to_calendar">
          <strong>Add auctions to the calendar</strong><br>
          <small class="text-muted">Every promoted auction becomes an event on your club page{% if club.google_calendar_connected %} and in Google Calendar{% endif %}.</small>
        </label>
      </div>
      <div class="form-check form-switch mb-3">
        <input class="form-check-input" type="checkbox" role="switch" id="create_discord_events_for_club_events"
               name="create_discord_events_for_club_events" {% if club.create_discord_events_for_club_events %}checked{% endif %}>
        <label class="form-check-label" for="create_discord_events_for_club_events">
          <strong>Create Discord events for calendar events</strong><br>
          <small class="text-muted">
            {% if discord_connected %}
            Meetings and other events get a Discord scheduled event. Auctions are handled by the
            <a href="{% url 'club_discord_config' club.slug %}">Discord settings</a>, so they're never doubled up.
            {% else %}
            <a href="{% url 'club_discord_config' club.slug %}">Connect a Discord server</a> to use this.
            {% endif %}
          </small>
        </label>
      </div>
      {% if club.google_calendar_connected %}
      <div class="form-check form-switch mb-3">
        <input class="form-check-input" type="checkbox" role="switch" id="google_calendar_is_public"
               name="google_calendar_is_public" {% if club.google_calendar_is_public %}checked{% endif %}>
        <label class="form-check-label" for="google_calendar_is_public">
          <strong>I've shared this calendar publicly in Google Calendar</strong><br>
          <small class="text-muted">
            Shows the Google subscribe links on your club page. Do the four steps above first &mdash;
            when you save, we try to load the calendar the way a member would, and untick this if it
            isn't really shared yet.
          </small>
        </label>
      </div>
      {% endif %}
      <button type="submit" class="btn btn-primary">Save settings</button>
    </form>
  </div>
</div>

<p class="text-muted small">
  <i class="bi bi-info-circle"></i>
  Your club page always offers an
  <a href="{% url 'club_events_ical' club.slug %}">iCal feed</a> of your events, whether or not
  Google Calendar is connected.
</p>
{% endblock %}