{% extends "base.html" %}
{% block title %}Calendário · {{ settings.app_name }}{% endblock %}
{% block content %}
<div class="page-head">
  <div>
    <p class="eyebrow"><a href="{{ app_path('/') }}">Rota</a></p>
    <h1>Calendário</h1>
    <p class="muted">Adiciona o endereço ao Google Calendar, Apple Calendar ou Outlook. O calendário atualiza-se sozinho, não é preciso repetir o processo.</p>
  </div>
</div>

<div class="stack gap-lg">
{% for feed in feeds %}
  <section class="panel">
    <h2>{{ feed.title }}</h2>
    <div class="inline-form">
      <input type="text" readonly value="{{ feed.url }}" aria-label="Endereço do calendário">
      <button class="secondary" type="button" data-copy="{{ feed.url }}">Copiar</button>
      <a class="button secondary" href="webcal://{{ feed.url.split('//')[-1] }}">Subscrever</a>
    </div>
  </section>
{% endfor %}
</div>

<script>
  // Copy the address without leaving the page; falls back to selecting the field.
  document.querySelectorAll("[data-copy]").forEach(function (button) {
    button.addEventListener("click", function () {
      var url = button.dataset.copy;
      var field = button.parentElement.querySelector("input");
      if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(url);
        button.textContent = "Copiado";
        setTimeout(function () { button.textContent = "Copiar"; }, 1500);
        return;
      }
      field.focus();
      field.select();
      button.textContent = "Copie com Ctrl+C";
    });
  });
</script>
{% endblock %}