{% extends "base.html" %}
{% load static %}

{% block title %}Embeddable Calendar Widget{% endblock %}

{% block content %}
<section class="embed-section embed-section-wide">
  <div class="embed-container">
    <div class="embed-shell-card {% if not show_embed_header %}embed-shell-card-compact{% endif %}">
      {% if show_embed_header %}
      <div class="embed-header d-flex flex-column flex-md-row justify-content-between gap-3 align-items-md-center">
        <div>
          <img src="{% static 'images/just-roasted-coffee-logo.png' %}" alt="Just Roasted Coffee logo" height="52" class="mb-3 d-block">
          <span class="eyebrow-pill">Embeddable widget</span>
          <h1 class="section-title mb-2">Where to find us</h1>
          <p class="section-copy mb-0">Tap a date to see the event name, time window, and event link.</p>
        </div>
        <a class="btn btn-ghost" href="{% url 'calendar_page' %}" target="_blank" rel="noopener">Open full page</a>
      </div>
      {% endif %}
      {% include "core/includes/calendar_widget.html" with calendar_variant="embed" %}
    </div>
  </div>
</section>
{% endblock %}