{% extends "base.html" %}
{% block content %}
<section class="card">
  <h2>Status</h2>
  {% if authorized %}
    <p><strong>Authorized:</strong> Yes</p>
    {% if profile %}
      <p><strong>User:</strong> {{ profile.name }} ({{ profile.email }})</p>
    {% endif %}
    {% if token %}
      <p><strong>Granted scopes:</strong> {{ token.scope }}</p>
      {% if expires_at %}
        <p><strong>Token expires:</strong> {{ expires_at.strftime('%Y-%m-%d %H:%M:%S %Z') }}</p>
      {% endif %}
    {% endif %}
    <div class="actions">
      <a class="button" href="{{ url_for('events') }}">View upcoming events</a>
      <a class="button secondary" href="{{ url_for('logout') }}">Log out</a>
    </div>
  {% else %}
    <p><strong>Authorized:</strong> No</p>
    <p>Click the button below to start the Google OAuth authorization code flow.</p>
    <div class="actions">
      <a class="button" href="{{ url_for('login') }}">Request access to Google Calendar</a>
    </div>
  {% endif %}
</section>

<section class="card code-block">
  <h2>What should happen when you press the button...</h2>
  <ol>
    <li>The browser is redirected from your app to Google.</li>
    <li>Google asks the user to grant calendar access.</li>
    <li>Google redirects back to <code>/oauth/callback</code> with a one-time authorization code.</li>
    <li>Your backend exchanges that code for tokens.</li>
    <li>Your backend calls the Calendar API using the access token.</li>
  </ol>
</section>
{% endblock %}