{% load i18n wagtailcore_tags %}

<div class="scal-outer">
<section class="scal-wrapper">

  {% if bloco.title %}
  <div class="scal-header">
    <h2 class="scal-titulo" {% if bloco.cor_title %}style="color: #{{ bloco.cor_title }};"{% endif %}>
      {{ bloco.title }}
    </h2>
  </div>
  {% endif %}

  {% if todos_itens %}

  {# ── Barra de filtros ── #}
  <div class="scal-filtros" role="group" aria-label="Filtros">

    {# Linha 1: Selects + Toggle de view #}
    <div class="scal-filtros-top">
      <div class="scal-selects">


        {% if mostrar_filtro_programas and programas_disponiveis %}
        <div class="scal-filtros-chips">
          <div class="scal-filtro-grupo">
            <span class="scal-filtro-label">Por programa</span>
            <div class="scal-area-dropdown" data-filtro="area">
              <button class="scal-area-btn" type="button" aria-expanded="false">
                <span class="scal-area-btn-label">Todos os programas</span>
                <span class="material-symbols-outlined" style="font-size:16px;line-height:1;" aria-hidden="true">expand_more</span>
              </button>
              <div class="scal-area-panel" hidden>
                {% for programa in programas_disponiveis %}
                <label class="scal-mes-item">
                  <input type="checkbox" class="scal-area-check" value="{{ programa }}">
                  <span>{{ programa }}</span>
                </label>
                {% endfor %}
              </div>
            </div>
          </div>
        </div>
        {% endif %}

        
        {% if anos_disponiveis %}
        <div class="scal-filtros-chips">
          <div class="scal-filtro-grupo">
            <span class="scal-filtro-label">Por ano</span>
            <div class="scal-ano-dropdown" data-filtro="ano">
              <button class="scal-ano-btn" type="button" aria-expanded="false">
                <span class="scal-ano-btn-label">Todos os anos</span>
                <span class="material-symbols-outlined" style="font-size:16px;line-height:1;" aria-hidden="true">expand_more</span>
              </button>
              <div class="scal-ano-panel" hidden>
                <label class="scal-mes-item">
                  <input type="radio" class="scal-ano-radio" name="scal-ano" value="todos" checked>
                  <span>Todos os anos</span>
                </label>
                {% for ano in anos_disponiveis %}
                <label class="scal-mes-item">
                  <input type="radio" class="scal-ano-radio" name="scal-ano" value="{{ ano }}">
                  <span>{{ ano }}</span>
                </label>
                {% endfor %}
              </div>
            </div>
          </div>
        </div>
        {% endif %}
        
        <div class="scal-filtros-chips">
          <div class="scal-filtro-grupo">
            <span class="scal-filtro-label">Por meses</span>
            {% if meses_disponiveis %}
            <div class="scal-mes-dropdown" data-filtro="mes">
              <button class="scal-mes-btn" type="button" aria-expanded="false">
                <span class="scal-mes-btn-label">Todos os meses</span>
                <span class="material-symbols-outlined" style="font-size:16px;line-height:1;" aria-hidden="true">expand_more</span>
              </button>
              <div class="scal-mes-panel" hidden>
                {% for item_mes in meses_disponiveis %}
                <label class="scal-mes-item" data-ano="{{ item_mes.ano }}">
                  <input type="checkbox" class="scal-mes-check"
                        value="{{ item_mes.ano }}-{{ item_mes.mes|stringformat:'02d' }}"
                        data-ano="{{ item_mes.ano }}">
                  <span>{{ item_mes.data_ref|date:"F"|capfirst }}<span class="scal-mes-item-ano"> {{ item_mes.ano }}</span></span>
                </label>
                {% endfor %}
              </div>
            </div>
            {% endif %}
          </div>
        </div>
      </div>

      <div class="scal-filtros-chips scal-filtros-chips--right">
        <div class="scal-filtro-grupo">
          <span class="scal-filtro-label">Aparência</span>
      <div class="scal-view-toggle" role="group" aria-label="Visualização">
        <button class="scal-view-btn" data-view="kanban" title="Kanban" aria-pressed="false">
          <span class="material-symbols-outlined">view_kanban</span>
        </button>
        <button class="scal-view-btn" data-view="lista" title="Lista" aria-pressed="false">
          <span class="material-symbols-outlined">view_list</span>
        </button>
        <button class="scal-view-btn scal-view-btn--ativo" data-view="calendario" title="Calendário" aria-pressed="true">
          <span class="material-symbols-outlined">calendar_month</span>
        </button>
      </div>
      </div>
        <div class="scal-filtro-grupo">
          <span class="scal-filtro-label">Exportar</span>
          <button class="scal-pdf-btn" type="button" title="Exportar calendário como PDF">
            <span class="material-symbols-outlined">picture_as_pdf</span>
            <span>PDF</span>
          </button>
        </div>
      </div>
      </div>

    {# Linha 2: Chips de filtro #}
    <div class="scal-filtros-chips">
      <div class="scal-filtro-grupo">
        <span class="scal-filtro-label">Tipo</span>
        <div class="scal-chips">
          <button class="scal-chip scal-chip--ativo" data-filtro="tipo" data-valor="todos">Todos</button>
          <button class="scal-chip" data-filtro="tipo" data-valor="curso">
            <span class="material-symbols-outlined scal-chip-icon">school</span>Curso
          </button>
          <button class="scal-chip" data-filtro="tipo" data-valor="evento">
            <span class="material-symbols-outlined scal-chip-icon">event</span>Evento
          </button>
        </div>
      </div>

      {% if modalidades_disponiveis|length > 1 %}
      <div class="scal-filtro-grupo">
        <span class="scal-filtro-label">Modalidade</span>
        <div class="scal-chips">
          <button class="scal-chip scal-chip--ativo" data-filtro="modalidade" data-valor="todos">Todos</button>
          {% for m in modalidades_disponiveis %}
          <button class="scal-chip" data-filtro="modalidade" data-valor="{{ m.valor }}">
            <span class="material-symbols-outlined scal-chip-icon">{{ m.icone }}</span>{{ m.label }}
          </button>
          {% endfor %}
        </div>
      </div>
      {% endif %}

      {% if situacoes_disponiveis|length > 0 %}
      <div class="scal-filtro-grupo">
        <span class="scal-filtro-label">Inscrições</span>
        <div class="scal-chips">
          <button class="scal-chip scal-chip--ativo" data-filtro="situacao" data-valor="todos">Todos</button>
          {% for s in situacoes_disponiveis %}
          <button class="scal-chip" data-filtro="situacao" data-valor="{{ s.valor }}">
            <span class="material-symbols-outlined scal-chip-icon">{{ s.icone }}</span>{{ s.label }}
          </button>
          {% endfor %}
        </div>
      </div>
      {% endif %}

      <button class="scal-limpar-filtros scal-limpar-filtros--inline" style="display:none;">
        <span class="material-symbols-outlined" style="font-size:16px;line-height:1;">filter_list_off</span>
        Limpar filtros
      </button>
    </div>

  </div>
  <div class="scal-view" data-view-container="kanban" style="display:none;">
    <div class="scal-board-wrapper">
      <button class="scal-board-nav scal-board-nav--prev" aria-label="Rolar para esquerda">
        <span class="visually-hidden">Rolar para esquerda</span>
        <span class="material-symbols-outlined">chevron_left</span>
      </button>
      <button class="scal-board-nav scal-board-nav--next" aria-label="Rolar para direita">
        <span class="visually-hidden">Rolar para direita</span>
        <span class="material-symbols-outlined">chevron_right</span>
      </button>
    <div class="scal-board">

      {% for grupo in calendario %}
      <div class="scal-coluna"
           data-mes="{{ grupo.ano }}-{{ grupo.mes|stringformat:'02d' }}">

        <div class="scal-coluna-header">
          <span class="scal-coluna-titulo">{{ grupo.data_ref|date:"F" }}</span>
          <span class="scal-coluna-ano">{{ grupo.ano }}</span>
          <span class="scal-coluna-count"><span class="scal-mes-num">{{ grupo.itens|length }}</span></span>
        </div>

        <div class="scal-coluna-itens">
          {% for item in grupo.itens %}
          <div class="scal-card"
               data-modalidade="{{ item.cal_modalidade }}"
               data-situacao="{{ item.cal_situacao_inscricao }}"
               data-tipo="{{ item.cal_tipo }}"
               data-area="{{ item.cal_area }}"
               data-programa="{{ item.cal_programa }}"
               data-ano="{{ item.data_inicio|date:'Y' }}"
               data-mes="{{ item.data_inicio|date:'Y-m' }}"
               data-dia="{{ item.data_inicio|date:'j' }}"
               data-nome="{{ item.cal_nome }}"
               data-data-inicio="{{ item.data_inicio|date:'Y-m-d' }}"
               {% if item.url %}data-url="{{ item.url }}"{% endif %}
               {% if item.horario %}data-horario="{{ item.horario|slice:':5' }}"{% endif %}>

            {% if item.data_inicio %}
            <div class="scal-card-data">
              <span class="scal-card-dia">{{ item.data_inicio|date:"d" }}</span>
              <span class="scal-card-mes-abr">{{ item.data_inicio|date:"M" }}</span>
              <span class="scal-card-semana">{{ item.data_inicio|date:"D" }}</span>
            </div>
            {% endif %}

            <div class="scal-card-body">
              <div class="scal-card-badges-wrapper">
                  <div class="wrapper-tag-title">
                  <div class="scal-card-badges">
                    <span class="scal-badge scal-badge--{{ item.cal_tipo }}">{{ item.cal_tipo|capfirst }}</span>
                    {% if item.cal_situacao_info %}
                    <span class="scal-badge scal-badge--situacao scal-badge--{{ item.cal_situacao_inscricao }}">
                      <span class="material-symbols-outlined scal-badge-icon">{{ item.cal_situacao_info.icone }}</span>{{ item.cal_situacao_info.label }}
                    </span>
                    {% endif %}
                  </div>

                  {% if item.cal_nome %}
                  <p class="scal-card-titulo">
                    {% if item.url %}
                      <a href="{{ item.url }}" target="_blank" rel="noopener noreferrer" class="scal-card-link">{{ item.cal_nome }}</a>
                    {% else %}
                      {{ item.cal_nome }}
                    {% endif %}
                  </p>
                  {% endif %}
                </div>

                  <div class="scal-card-meta">
                    {% if item.cal_modalidade %}
                    <span class="scal-meta-item">
                      <span class="material-symbols-outlined scal-meta-icon">{{ item.cal_modalidade_info.icone }}</span>{{ item.cal_modalidade_info.label }}
                    </span>
                    {% endif %}
                    {% if item.horario %}
                    <span class="scal-meta-item">
                      <span class="material-symbols-outlined scal-meta-icon">schedule</span>{{ item.horario|slice:":5" }}
                    </span>
                    {% endif %}
                    {% if item.carga_horaria %}
                    <span class="scal-meta-item">
                      <span class="material-symbols-outlined scal-meta-icon">timer</span>{{ item.carga_horaria }}h
                    </span>
                    {% endif %}
                  </div>
              </div>
            </div>

            {% if item.data_inicio %}
            <div class="scal-card-actions" role="group" aria-label="Exportar para calendário">
              <button class="scal-export-btn scal-export-trigger" type="button" title="Adicionar ao calendário" aria-label="Adicionar ao calendário" aria-expanded="false">
                <span class="material-symbols-outlined" aria-hidden="true">event_available</span>
              </button>
            </div>
            {% endif %}

          </div>
          {% endfor %}

          <div class="scal-coluna-vazia" style="display:none;">
            <span class="material-symbols-outlined">event_busy</span>
            <p>Sem itens</p>
          </div>
        </div>

      </div>
      {% endfor %}

    </div>
    </div>
  </div>


  <div class="scal-view" data-view-container="lista" style="display:none;">
    <div class="scal-lista">

      {% for grupo in calendario %}
      <div class="scal-lista-grupo"
           data-mes="{{ grupo.ano }}-{{ grupo.mes|stringformat:'02d' }}">

        <div class="scal-lista-mes-header">
          <span class="scal-lista-mes-titulo">{{ grupo.data_ref|date:"F Y"|capfirst }}</span>
          <span class="scal-lista-mes-count"><span class="scal-lista-mes-num">{{ grupo.itens|length }}</span> itens</span>
        </div>

        <div class="scal-lista-itens">
          {% for item in grupo.itens %}
          <div class="scal-lista-row"
               data-modalidade="{{ item.cal_modalidade }}"
               data-situacao="{{ item.cal_situacao_inscricao }}"
               data-tipo="{{ item.cal_tipo }}"
               data-area="{{ item.cal_area }}"
               data-programa="{{ item.cal_programa }}"
               data-ano="{{ item.data_inicio|date:'Y' }}"
               data-mes="{{ item.data_inicio|date:'Y-m' }}"
               data-nome="{{ item.cal_nome }}"
               data-data-inicio="{{ item.data_inicio|date:'Y-m-d' }}"
               {% if item.url %}data-url="{{ item.url }}"{% endif %}
               {% if item.horario %}data-horario="{{ item.horario|slice:':5' }}"{% endif %}>

            {% if item.data_inicio %}
            <div class="scal-lista-data">
              <span class="scal-lista-dia">{{ item.data_inicio|date:"d" }}</span>
              <span class="scal-lista-mes-abr">{{ item.data_inicio|date:"M" }}</span>
              <span class="scal-card-semana">{{ item.data_inicio|date:"D" }}</span>
            </div>
            {% endif %}

            <div class="scal-lista-badges">
              <span class="scal-badge scal-badge--{{ item.cal_tipo }}">{{ item.cal_tipo|capfirst }}</span>
              {% if item.cal_situacao_info %}
              <span class="scal-badge scal-badge--situacao scal-badge--{{ item.cal_situacao_inscricao }}">
                <span class="material-symbols-outlined scal-badge-icon">{{ item.cal_situacao_info.icone }}</span>{{ item.cal_situacao_info.label }}
              </span>
              {% endif %}
            </div>

            <p class="scal-lista-nome">
              {% if item.url %}
                <a href="{{ item.url }}" target="_blank" rel="noopener noreferrer" class="scal-card-link">{{ item.cal_nome }}</a>
              {% else %}
                {{ item.cal_nome }}
              {% endif %}
            </p>

            <div class="scal-lista-meta">
              {% if item.cal_modalidade %}
              <span class="scal-meta-item">
                <span class="material-symbols-outlined scal-meta-icon">{{ item.cal_modalidade_info.icone }}</span>{{ item.cal_modalidade_info.label }}
              </span>
              {% endif %}
              {% if item.horario %}
              <span class="scal-meta-item">
                <span class="material-symbols-outlined scal-meta-icon">schedule</span>{{ item.horario|slice:":5" }}
              </span>
              {% endif %}
              {% if item.carga_horaria %}
              <span class="scal-meta-item">
                <span class="material-symbols-outlined scal-meta-icon">timer</span>{{ item.carga_horaria }}h
              </span>
              {% endif %}
            </div>

            {% if item.data_inicio %}
            <div class="scal-lista-export" aria-label="Exportar para calendário">
              <button class="scal-export-btn scal-export-trigger" type="button" title="Adicionar ao calendário" aria-label="Adicionar ao calendário" aria-expanded="false">
                <span class="material-symbols-outlined" aria-hidden="true">event_available</span>
              </button>
            </div>
            {% endif %}

          </div>
          {% endfor %}
        </div>

      </div>
      {% endfor %}

    </div>
  </div>


  <div class="scal-view" data-view-container="calendario">
    <div class="scal-grid-cards">
      {% for grupo in calendario %}
      <div class="scal-grid-grupo"
           data-mes="{{ grupo.ano }}-{{ grupo.mes|stringformat:'02d' }}">
        <div class="scal-grid-mes-header">
          <span class="scal-grid-mes-titulo">{{ grupo.data_ref|date:"F Y"|capfirst }}</span>
          <span class="scal-grid-mes-count"><span class="scal-grid-mes-num">{{ grupo.itens|length }}</span> itens</span>
        </div>
        <div class="scal-grid-mes-cards">
          {% for item in grupo.itens %}
          <div class="scal-card"
               data-modalidade="{{ item.cal_modalidade }}"
               data-situacao="{{ item.cal_situacao_inscricao }}"
               data-tipo="{{ item.cal_tipo }}"
               data-area="{{ item.cal_area }}"
               data-programa="{{ item.cal_programa }}"
               data-ano="{{ item.data_inicio|date:'Y' }}"
               data-mes="{{ item.data_inicio|date:'Y-m' }}"
               data-dia="{{ item.data_inicio|date:'j' }}"
               data-nome="{{ item.cal_nome }}"
               data-data-inicio="{{ item.data_inicio|date:'Y-m-d' }}"
               {% if item.url %}data-url="{{ item.url }}"{% endif %}
               {% if item.horario %}data-horario="{{ item.horario|slice:':5' }}"{% endif %}>

            {% if item.data_inicio %}
            <div class="scal-card-data">
              <span class="scal-card-dia">{{ item.data_inicio|date:"d" }}</span>
              <span class="scal-card-mes-abr">{{ item.data_inicio|date:"M" }}</span>
              <span class="scal-card-semana">{{ item.data_inicio|date:"D" }}</span>
            </div>
            {% endif %}

            <div class="scal-card-body">
              <div class="scal-card-badges-wrapper">
                <div class="wrapper-tag-title">
                  <div class="scal-card-badges">
                    <span class="scal-badge scal-badge--{{ item.cal_tipo }}">{{ item.cal_tipo|capfirst }}</span>
                    {% if item.cal_situacao_info %}
                    <span class="scal-badge scal-badge--situacao scal-badge--{{ item.cal_situacao_inscricao }}">
                      <span class="material-symbols-outlined scal-badge-icon">{{ item.cal_situacao_info.icone }}</span>{{ item.cal_situacao_info.label }}
                    </span>
                    {% endif %}
                  </div>
                  {% if item.cal_nome %}
                  <p class="scal-card-titulo">
                    {% if item.url %}
                      <a href="{{ item.url }}" target="_blank" rel="noopener noreferrer" class="scal-card-link">{{ item.cal_nome }}</a>
                    {% else %}
                      {{ item.cal_nome }}
                    {% endif %}
                  </p>
                  {% endif %}
                </div>
                <div class="scal-card-meta">
                  {% if item.cal_modalidade %}
                  <span class="scal-meta-item"><span class="material-symbols-outlined scal-meta-icon">{{ item.cal_modalidade_info.icone }}</span>{{ item.cal_modalidade_info.label }}</span>
                  {% endif %}
                  {% if item.horario %}
                  <span class="scal-meta-item"><span class="material-symbols-outlined scal-meta-icon">schedule</span>{{ item.horario|slice:":5" }}</span>
                  {% endif %}
                  {% if item.carga_horaria %}
                  <span class="scal-meta-item"><span class="material-symbols-outlined scal-meta-icon">timer</span>{{ item.carga_horaria }}h</span>
                  {% endif %}
                </div>
              </div>
            </div>

            {% if item.data_inicio %}
            <div class="scal-card-actions" role="group" aria-label="Exportar para calendário">
              <button class="scal-export-btn scal-export-trigger" type="button" title="Adicionar ao calendário" aria-label="Adicionar ao calendário" aria-expanded="false">
                <span class="material-symbols-outlined" aria-hidden="true">event_available</span>
              </button>
            </div>
            {% endif %}

          </div>
          {% endfor %}
        </div>
      </div>
      {% endfor %}
    </div>
  </div>

  {# ── Paginação ── #}
  <div class="scal-paginacao" style="display:none;">
    <button class="scal-ver-mais-btn" type="button">
      <span class="material-symbols-outlined">expand_more</span>Ver mais
    </button>
    <button class="scal-ver-menos-btn" type="button" style="display:none;">
      <span class="material-symbols-outlined">expand_less</span>Ver menos
    </button>
  </div>

  {# ── Estado vazio geral ── #}
  <div class="scal-vazio-filtro" style="display:none;" aria-live="polite">
    <span class="material-symbols-outlined scal-vazio-icon">calendar_today</span>
    <p>Nenhum item encontrado com os filtros selecionados.</p>
    <button class="scal-limpar-filtros">Limpar filtros</button>
  </div>

  {% else %}
  {% if aguardando_cache %}
  <div class="scal-loading-cache" id="scal-loading-cache">
    <span class="material-symbols-outlined scal-loading-icon scal-loading-icon--lg" aria-hidden="true">autorenew</span>
    <p class="scal-loading-titulo">Carregando calendário...</p>
    <p class="scal-loading-subtitulo">Os dados estão sendo carregados. A página será atualizada automaticamente.</p>
  </div>
  <script>
    (function () {
      var delay = 6000;
      var max = 5;
      var attempt = parseInt(sessionStorage.getItem('scal_reload') || '0', 10);
      if (attempt < max) {
        sessionStorage.setItem('scal_reload', attempt + 1);
        setTimeout(function () { location.reload(); }, delay);
      } else {
        sessionStorage.removeItem('scal_reload');
        var el = document.getElementById('scal-loading-cache');
        if (el) {
          el.querySelector('.scal-loading-titulo').textContent = 'Não foi possível carregar os dados. Tente recarregar a página.';
          var sub = el.querySelector('.scal-loading-subtitulo');
          if (sub) sub.hidden = true;
          el.querySelector('.scal-loading-icon').style.animation = 'none';
        }
      }
    }());
  </script>
  {% else %}
  <div class="scal-vazio-filtro">
    <span class="material-symbols-outlined scal-vazio-icon">calendar_today</span>
    <p>Nenhum item disponível no momento.</p>
  </div>
  {% endif %}
  {% endif %}

  {# Frame de impressão/PDF (montado por JS) #}
  <div class="scal-print-frame" aria-hidden="true"></div>

</section>
</div>

{# Popup global de export — fora dos cards para escapar do overflow:hidden #}
<div id="scal-export-popup" hidden role="menu" aria-label="Adicionar ao calendário">
  <button class="scal-export-option" data-export="google" type="button" role="menuitem">
    <span class="material-symbols-outlined" aria-hidden="true">event_available</span>Google Calendar
  </button>
  <button class="scal-export-option" data-export="outlook" type="button" role="menuitem">
    <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" style="flex-shrink:0;"><path d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm-7 3c2.21 0 4 1.79 4 4s-1.79 4-4 4-4-1.79-4-4 1.79-4 4-4zm6 12H6v-1c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1z"/></svg>Microsoft Outlook
  </button>
</div>

<script>
  (function () {
    /* ── Encontra o wrapper: currentScript é mais confiável, fallback por marca ── */
    var wrapper = null;
    if (document.currentScript) {
      wrapper = document.currentScript.closest('.scal-outer');
    }
    if (!wrapper) {
      var outers = document.querySelectorAll('.scal-outer:not([data-scal-init])');
      wrapper = outers[outers.length - 1] || null;
    }
    if (!wrapper) return;
    wrapper.setAttribute('data-scal-init', '1');

    var filtros = { areas: [], ano: 'todos', meses: [], status: 'todos', modalidade: 'todos', situacao: 'todos', tipo: 'todos' };
    var viewAtual = 'calendario';
    var viewManual = false; // true somente após clique manual no toggle

    var hoje = new Date();

    /* ── Marcar grupo do mês atual e inserir tag na linha do header (todas as views) ── */
    var mesAtualStr = hoje.getFullYear() + '-' + (hoje.getMonth() + 1 < 10 ? '0' : '') + (hoje.getMonth() + 1);
    wrapper.querySelectorAll('[data-mes="' + mesAtualStr + '"]').forEach(function (grupo) {
      grupo.classList.add('scal-mes--atual');
      var header = grupo.querySelector('.scal-coluna-header, .scal-lista-mes-header, .scal-grid-mes-header');
      if (header && !header.querySelector('.scal-tag-mes-atual')) {
        var tag = document.createElement('span');
        tag.className = 'scal-tag-mes-atual';
        tag.textContent = 'Mês atual';
        var countEl = header.querySelector('.scal-coluna-count, .scal-lista-mes-count, .scal-grid-mes-count');
        header.insertBefore(tag, countEl || null);
      }
    });

    /* ── Toggle de view ── */
    wrapper.querySelectorAll('.scal-view-btn').forEach(function (btn) {
      btn.addEventListener('click', function () {
        mudarView(btn.dataset.view, true);
      });
    });

    function mudarView(view, manual) {
      if (manual) viewManual = true;   // só seta true; nunca reseta para false aqui
      viewAtual = view;

      wrapper.querySelectorAll('.scal-view').forEach(function (el) {
        el.style.display = el.dataset.viewContainer === view ? '' : 'none';
      });
      wrapper.querySelectorAll('.scal-view-btn').forEach(function (btn) {
        var ativo = btn.dataset.view === view;
        btn.classList.toggle('scal-view-btn--ativo', ativo);
        btn.setAttribute('aria-pressed', ativo ? 'true' : 'false');
      });

    }

    /* ── Dropdown de ano ── */
    var anoDropdown = wrapper.querySelector('.scal-ano-dropdown');
    if (anoDropdown) {
      var anoBtn = anoDropdown.querySelector('.scal-ano-btn');
      var anoPanelEl = anoDropdown.querySelector('.scal-ano-panel');

      anoBtn.addEventListener('click', function (e) {
        e.stopPropagation();
        var aberto = !anoPanelEl.hidden;
        anoPanelEl.hidden = aberto;
        anoBtn.setAttribute('aria-expanded', aberto ? 'false' : 'true');
      });

      anoPanelEl.querySelectorAll('.scal-ano-radio').forEach(function (radio) {
        radio.addEventListener('change', function () {
          filtros.ano = radio.value;
          atualizarLabelAno();
          anoPanelEl.hidden = true;
          anoBtn.setAttribute('aria-expanded', 'false');
          filtrarMesesPorAno(radio.value);
          if (radio.value !== 'todos') {
            mudarView('calendario', true);
          } else if (viewAtual === 'calendario') {
            viewManual = false;
          }
          aplicarFiltros();
        });
      });

      document.addEventListener('click', function (e) {
        if (!anoDropdown.contains(e.target)) {
          anoPanelEl.hidden = true;
          anoBtn.setAttribute('aria-expanded', 'false');
        }
      });
    }

    function atualizarLabelAno() {
      var btn = wrapper.querySelector('.scal-ano-btn');
      if (!btn) return;
      var label = btn.querySelector('.scal-ano-btn-label');
      if (!label) return;
      label.textContent = filtros.ano === 'todos' ? 'Todos os anos' : filtros.ano;
    }

    /* ── Chips ── */
    wrapper.querySelectorAll('.scal-chip').forEach(function (btn) {
      btn.addEventListener('click', function () {
        var grupo = btn.dataset.filtro;
        filtros[grupo] = btn.dataset.valor;
        wrapper.querySelectorAll('.scal-chip[data-filtro="' + grupo + '"]')
          .forEach(function (b) { b.classList.remove('scal-chip--ativo'); });
        btn.classList.add('scal-chip--ativo');
        // Não altera viewManual — mantém a view atual
        aplicarFiltros();
      });
    });

    /* ── Dropdown de meses ── */
    var mesDropdown = wrapper.querySelector('.scal-mes-dropdown');
    if (mesDropdown) {
      var mesBtn = mesDropdown.querySelector('.scal-mes-btn');
      var mesPanelEl = mesDropdown.querySelector('.scal-mes-panel');

      mesBtn.addEventListener('click', function (e) {
        e.stopPropagation();
        var aberto = !mesPanelEl.hidden;
        mesPanelEl.hidden = aberto;
        mesBtn.setAttribute('aria-expanded', aberto ? 'false' : 'true');
      });

      mesPanelEl.querySelectorAll('.scal-mes-check').forEach(function (cb) {
        cb.addEventListener('change', function () {
          if (cb.checked) {
            filtros.meses.push(cb.value);
          } else {
            filtros.meses = filtros.meses.filter(function (m) { return m !== cb.value; });
          }
          atualizarLabelMes();
          aplicarFiltros();
        });
      });

      document.addEventListener('click', function (e) {
        if (!mesDropdown.contains(e.target)) {
          mesPanelEl.hidden = true;
          mesBtn.setAttribute('aria-expanded', 'false');
        }
      });
    }

    /* ── Dropdown de áreas ── */
    var areaDropdown = wrapper.querySelector('.scal-area-dropdown');
    if (areaDropdown) {
      var areaBtn = areaDropdown.querySelector('.scal-area-btn');
      var areaPanelEl = areaDropdown.querySelector('.scal-area-panel');

      areaBtn.addEventListener('click', function (e) {
        e.stopPropagation();
        var aberto = !areaPanelEl.hidden;
        areaPanelEl.hidden = aberto;
        areaBtn.setAttribute('aria-expanded', aberto ? 'false' : 'true');
      });

      areaPanelEl.querySelectorAll('.scal-area-check').forEach(function (cb) {
        cb.addEventListener('change', function () {
          if (cb.checked) {
            filtros.areas.push(cb.value);
          } else {
            filtros.areas = filtros.areas.filter(function (a) { return a !== cb.value; });
          }
          atualizarLabelArea();
          aplicarFiltros();
        });
      });

      document.addEventListener('click', function (e) {
        if (!areaDropdown.contains(e.target)) {
          areaPanelEl.hidden = true;
          areaBtn.setAttribute('aria-expanded', 'false');
        }
      });
    }

    function atualizarLabelArea() {
      var btn = wrapper.querySelector('.scal-area-btn');
      if (!btn) return;
      var label = btn.querySelector('.scal-area-btn-label');
      if (!label) return;
      if (filtros.areas.length === 0) {
        label.textContent = 'Todas as áreas';
      } else if (filtros.areas.length === 1) {
        label.textContent = filtros.areas[0];
      } else {
        label.textContent = filtros.areas.length + ' áreas';
      }
    }

    function atualizarLabelMes() {
      var btn = wrapper.querySelector('.scal-mes-btn');
      if (!btn) return;
      var label = btn.querySelector('.scal-mes-btn-label');
      if (!label) return;
      if (filtros.meses.length === 0) {
        label.textContent = 'Todos os meses';
      } else if (filtros.meses.length === 1) {
        var cb = wrapper.querySelector('.scal-mes-check[value="' + filtros.meses[0] + '"]');
        if (cb) {
          var itemEl = cb.closest('.scal-mes-item');
          label.textContent = itemEl ? itemEl.querySelector('span').textContent.trim() : filtros.meses[0];
        }
      } else {
        label.textContent = filtros.meses.length + ' meses';
      }
    }

    function filtrarMesesPorAno(ano) {
      var panel = wrapper.querySelector('.scal-mes-panel');
      if (!panel) return;
      panel.classList.toggle('scal-mes-panel--ano-filtrado', ano !== 'todos');
      panel.querySelectorAll('.scal-mes-item').forEach(function (item) {
        var mostra = ano === 'todos' || item.dataset.ano === ano;
        item.classList.toggle('scal-mes-item--oculta', !mostra);
        if (!mostra) {
          var cb = item.querySelector('.scal-mes-check');
          if (cb && cb.checked) {
            cb.checked = false;
            filtros.meses = filtros.meses.filter(function (m) { return m !== cb.value; });
          }
        }
      });
      atualizarLabelMes();
    }

    /* ── Limpar filtros ── */
    wrapper.querySelectorAll('.scal-limpar-filtros').forEach(function (btnLimpar) {
      btnLimpar.addEventListener('click', function () {
        filtros = { areas: [], ano: 'todos', meses: [], status: 'todos', modalidade: 'todos', situacao: 'todos', tipo: 'todos' };
        var radioTodos = wrapper.querySelector('.scal-ano-radio[value="todos"]');
        if (radioTodos) radioTodos.checked = true;
        wrapper.querySelectorAll('.scal-mes-check').forEach(function (cb) { cb.checked = false; });
        wrapper.querySelectorAll('.scal-area-check').forEach(function (cb) { cb.checked = false; });
        wrapper.querySelectorAll('.scal-mes-item').forEach(function (item) { item.classList.remove('scal-mes-item--oculta'); });
        var resetPanel = wrapper.querySelector('.scal-mes-panel');
        if (resetPanel) resetPanel.classList.remove('scal-mes-panel--ano-filtrado');
        atualizarLabelAno();
        atualizarLabelMes();
        atualizarLabelArea();
        wrapper.querySelectorAll('.scal-chip[data-valor="todos"]').forEach(function (b) { b.classList.add('scal-chip--ativo'); });
        wrapper.querySelectorAll('.scal-chip:not([data-valor="todos"])').forEach(function (b) { b.classList.remove('scal-chip--ativo'); });
        viewManual = false;
        aplicarFiltros();
      });
    });


    /* ── Mostrar/ocultar botão limpar inline ── */
    function atualizarBtnLimpar() {
      var temFiltro = filtros.areas.length > 0 || filtros.meses.length > 0 ||
        Object.keys(filtros).some(function (k) {
          return k !== 'areas' && k !== 'meses' && filtros[k] !== 'todos';
        });
      var btnInline = wrapper.querySelector('.scal-limpar-filtros--inline');
      if (btnInline) btnInline.style.display = temFiltro ? '' : 'none';
    }

    /* ── Filtro por item ── */
    function itemPassaFiltro(el) {
      return (
        (filtros.areas.length === 0    || filtros.areas.indexOf(el.dataset.programa) !== -1) &&
        (filtros.ano        === 'todos' || el.dataset.ano        === filtros.ano) &&
        (filtros.meses.length === 0    || filtros.meses.indexOf(el.dataset.mes) !== -1) &&
        (filtros.status     === 'todos' || el.dataset.status     === filtros.status) &&
        (filtros.modalidade === 'todos' || el.dataset.modalidade === filtros.modalidade) &&
        (filtros.situacao   === 'todos' || el.dataset.situacao   === filtros.situacao) &&
        (filtros.tipo       === 'todos' || el.dataset.tipo       === filtros.tipo)
      );
    }

    /* ── Paginação ── */
    var PAGINA_ITENS = 50;
    var paginaAtual = PAGINA_ITENS;

    function aplicarPaginacao() {
      var cont = 0;
      var temMais = false;

      /* Kanban: limita cards visíveis globalmente */
      wrapper.querySelectorAll('.scal-board .scal-coluna').forEach(function (coluna) {
        coluna.querySelectorAll('.scal-card:not(.scal-card--oculto)').forEach(function (card) {
          cont++;
          var paginado = cont > paginaAtual;
          card.classList.toggle('scal-card--paginado', paginado);
          if (paginado) temMais = true;
        });
        /* Atualiza count da coluna excluindo paginados */
        var num = coluna.querySelector('.scal-mes-num');
        if (num) num.textContent = coluna.querySelectorAll('.scal-card:not(.scal-card--oculto):not(.scal-card--paginado)').length;
      });

      /* Lista: limita rows visíveis globalmente */
      cont = 0;
      wrapper.querySelectorAll('.scal-lista .scal-lista-grupo').forEach(function (grupo) {
        if (grupo.style.display === 'none') return;
        var visivelNaPag = 0;
        grupo.querySelectorAll('.scal-lista-row').forEach(function (row) {
          if (row.style.display === 'none') return; /* filtrado */
          cont++;
          var paginado = cont > paginaAtual;
          row.classList.toggle('scal-lista-row--paginado', paginado);
          if (paginado) temMais = true;
          else visivelNaPag++;
        });
        /* Se todas as rows do grupo foram paginadas, esconde o grupo */
        var totalNaoFiltradas = grupo.querySelectorAll('.scal-lista-row:not([style*="display: none"])').length;
        if (totalNaoFiltradas > 0 && visivelNaPag === 0) grupo.style.display = 'none';
        var numEl = grupo.querySelector('.scal-lista-mes-num');
        if (numEl) numEl.textContent = visivelNaPag;
      });

      /* Botões */
      var paginacaoEl = wrapper.querySelector('.scal-paginacao');
      var verMaisBtn  = wrapper.querySelector('.scal-ver-mais-btn');
      var verMenosBtn = wrapper.querySelector('.scal-ver-menos-btn');
      var mostraBotoes = temMais || paginaAtual > PAGINA_ITENS;
      if (paginacaoEl) paginacaoEl.style.display = mostraBotoes ? '' : 'none';
      if (verMaisBtn)  verMaisBtn.style.display  = temMais ? '' : 'none';
      if (verMenosBtn) verMenosBtn.style.display = paginaAtual > PAGINA_ITENS ? '' : 'none';

    }

    /* ── Reordenar grupos de meses no DOM ──
       Regra: mês atual + futuros em ordem crescente, passados em ordem decrescente.
       Quando filtro de ano específico: só considera meses daquele ano.
    ── */
    function reordenarGruposDom(container, seletor) {
      if (!container) return;
      var mesAtual = hoje.getFullYear() + '-' + (hoje.getMonth() + 1 < 10 ? '0' : '') + (hoje.getMonth() + 1);
      var grupos = Array.prototype.slice.call(container.querySelectorAll(seletor));
      if (grupos.length === 0) return;

      var futuros = [];
      var passados = [];
      grupos.forEach(function (el) {
        var mes = el.dataset.mes || '';
        if (mes >= mesAtual) {
          futuros.push(el);
        } else {
          passados.push(el);
        }
      });

      // futuros: crescente (já estão na ordem certa)
      // passados: decrescente (inverter)
      passados.reverse();

      var ordenados = futuros.concat(passados);
      ordenados.forEach(function (el) {
        container.appendChild(el);
      });

      /* ── Separador "O que já fizemos" ── */
      var divisor = container.querySelector('.scal-historico-divisor');
      if (passados.length > 0) {
        if (!divisor) {
          divisor = document.createElement('div');
          divisor.className = 'scal-historico-divisor';
          divisor.setAttribute('aria-hidden', 'true');
          divisor.innerHTML = '<span>O que já fizemos</span>';
        }
        container.insertBefore(divisor, passados[0]);
        var temPassadosVisiveis = passados.some(function (el) { return el.style.display !== 'none'; });
        divisor.style.display = temPassadosVisiveis ? '' : 'none';
      } else {
        if (divisor) divisor.remove();
      }

    }

    /* ── Aplicar filtros ── */
    function aplicarFiltros() {
      paginaAtual = PAGINA_ITENS; /* reseta paginação ao mudar filtros */
      atualizarBtnLimpar();
      var totalVisiveis = 0;

      /* Kanban */
      wrapper.querySelectorAll('.scal-coluna').forEach(function (coluna) {
        var cards = coluna.querySelectorAll('.scal-card');
        var visiveis = 0;
        cards.forEach(function (card) {
          var ok = itemPassaFiltro(card);
          card.classList.toggle('scal-card--oculto', !ok);
          if (ok) { visiveis++; totalVisiveis++; }
        });
        var num = coluna.querySelector('.scal-mes-num');
        if (num) num.textContent = visiveis;
        var vazio = coluna.querySelector('.scal-coluna-vazia');
        if (vazio) vazio.style.display = visiveis === 0 ? 'flex' : 'none';
        coluna.classList.toggle('scal-coluna--vazia-total', visiveis === 0);
      });
      reordenarGruposDom(wrapper.querySelector('.scal-board'), '.scal-coluna');

      /* Lista */
      wrapper.querySelectorAll('.scal-lista-grupo').forEach(function (grupo) {
        var rows = grupo.querySelectorAll('.scal-lista-row');
        var visiveis = 0;
        rows.forEach(function (row) {
          var ok = itemPassaFiltro(row);
          row.style.display = ok ? '' : 'none';
          if (ok) visiveis++;
        });
        var numEl = grupo.querySelector('.scal-lista-mes-num');
        if (numEl) numEl.textContent = visiveis;
        grupo.style.display = visiveis === 0 ? 'none' : '';
      });
      reordenarGruposDom(wrapper.querySelector('.scal-lista'), '.scal-lista-grupo');

      /* Calendário */
      wrapper.querySelectorAll('.scal-grid-grupo').forEach(function (grupo) {
        var cards = grupo.querySelectorAll('.scal-card');
        var visiveis = 0;
        cards.forEach(function (card) {
          var ok = itemPassaFiltro(card);
          card.classList.toggle('scal-card--oculto', !ok);
          if (ok) visiveis++;
        });
        var numEl = grupo.querySelector('.scal-grid-mes-num');
        if (numEl) numEl.textContent = visiveis;
        grupo.style.display = visiveis === 0 ? 'none' : '';
      });
      reordenarGruposDom(wrapper.querySelector('.scal-grid-cards'), '.scal-grid-grupo');

      /* Estado vazio */
      var vazioEl = wrapper.querySelector('.scal-vazio-filtro');
      if (vazioEl) vazioEl.style.display = totalVisiveis === 0 ? '' : 'none';

      /* Auto-view */
      if (!viewManual) {
        var autoView;
        if (totalVisiveis > 80) {
          autoView = 'lista';
        } else {
          autoView = 'calendario';
        }
        mudarView(autoView, false);
      }

      aplicarPaginacao();
    }

    /* ── Ver mais / Ver menos ── */
    var verMaisBtn = wrapper.querySelector('.scal-ver-mais-btn');
    var verMenosBtn = wrapper.querySelector('.scal-ver-menos-btn');
    if (verMaisBtn) {
      verMaisBtn.addEventListener('click', function () {
        paginaAtual += PAGINA_ITENS;
        aplicarPaginacao();
      });
    }
    if (verMenosBtn) {
      verMenosBtn.addEventListener('click', function () {
        paginaAtual = PAGINA_ITENS;
        aplicarPaginacao();
      });
    }

    /* ── Exportar PDF ── */
    var pdfBtn = wrapper.querySelector('.scal-pdf-btn');
    if (pdfBtn) {
      pdfBtn.addEventListener('click', function () {
        var printFrame = wrapper.querySelector('.scal-print-frame');
        if (!printFrame) return;

        // Limpa frame anterior
        while (printFrame.firstChild) printFrame.removeChild(printFrame.firstChild);

        // Título do bloco
        var tituloEl = wrapper.querySelector('.scal-titulo');
        var titulo = tituloEl ? tituloEl.textContent.trim() : 'Calendário';

        // Filtros ativos em texto
        var filtrosDesc = [];
        if (filtros.ano !== 'todos') filtrosDesc.push('Ano: ' + filtros.ano);
        if (filtros.meses.length > 0) {
          filtrosDesc.push('Meses: ' + filtros.meses.map(function(m) {
            var p = m.split('-');
            return new Date(parseInt(p[0]), parseInt(p[1]) - 1, 1)
              .toLocaleDateString('pt-BR', { month: 'long', year: 'numeric' });
          }).join(', '));
        }
        if (filtros.status !== 'todos') filtrosDesc.push('Status: ' + filtros.status);
        if (filtros.modalidade !== 'todos') filtrosDesc.push('Modalidade: ' + filtros.modalidade);
        if (filtros.areas.length > 0) filtrosDesc.push('Áreas: ' + filtros.areas.join(', '));

        // Data/hora de exportação
        var agora = new Date();
        var dataExport = agora.toLocaleDateString('pt-BR', { day: '2-digit', month: 'long', year: 'numeric' })
          + ' às ' + agora.toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' });

        // Cabeçalho do PDF
        var cabecalho = document.createElement('div');
        cabecalho.className = 'scal-print-cabecalho';
        cabecalho.innerHTML =
          '<div>' +
            '<p class="scal-print-cabecalho-titulo">' + titulo + '</p>' +
            (filtrosDesc.length > 0 ? '<p class="scal-print-cabecalho-filtros">Filtros aplicados: ' + filtrosDesc.join(' &nbsp;|&nbsp; ') + '</p>' : '') +
          '</div>' +
          '<div class="scal-print-cabecalho-data">Exportado em<br><strong>' + dataExport + '</strong></div>';
        printFrame.appendChild(cabecalho);

        // Coleta grupos visíveis do calendário pré-renderizado
        wrapper.querySelectorAll('.scal-grid-cards .scal-grid-grupo').forEach(function(grupo) {
          if (grupo.style.display === 'none') return;
          var cardsVisiveis = grupo.querySelectorAll('.scal-card:not(.scal-card--oculto)');
          if (cardsVisiveis.length === 0) return;
          var tituloEl = grupo.querySelector('.scal-grid-mes-titulo');
          var label = tituloEl ? tituloEl.textContent.trim() : '';
          var mesDiv = document.createElement('div');
          mesDiv.className = 'scal-print-mes';

          var header = document.createElement('div');
          header.className = 'scal-grid-mes-header';
          header.innerHTML =
            '<span class="scal-grid-mes-titulo">' + label + '</span>' +
            '<span class="scal-grid-mes-count">' + cardsVisiveis.length + ' ite' + (cardsVisiveis.length === 1 ? 'm' : 'ns') + '</span>';
          mesDiv.appendChild(header);

          var grid = document.createElement('div');
          grid.className = 'scal-grid-mes-cards';
          cardsVisiveis.forEach(function(card) {
            var clone = card.cloneNode(true);
            clone.classList.remove('scal-card--oculto');
            // Remove botões de exportar (Google/iCal) do clone
            var actions = clone.querySelector('.scal-card-actions');
            if (actions) actions.remove();
            grid.appendChild(clone);
          });
          mesDiv.appendChild(grid);
          printFrame.appendChild(mesDiv);
        });

        window.print();

        // Limpa após impressão
        while (printFrame.firstChild) printFrame.removeChild(printFrame.firstChild);
      });
    }

    /* ── Nav buttons do kanban ── */
    var board = wrapper.querySelector('.scal-board');
    var btnPrev = wrapper.querySelector('.scal-board-nav--prev');
    var btnNext = wrapper.querySelector('.scal-board-nav--next');
    if (board && btnPrev && btnNext) {
      var SCROLL_STEP = 280;
      function atualizarNavBtns() {
        btnPrev.classList.toggle('scal-board-nav--oculto', board.scrollLeft <= 0);
        btnNext.classList.toggle('scal-board-nav--oculto', board.scrollLeft + board.clientWidth >= board.scrollWidth - 4);
      }
      btnPrev.addEventListener('click', function () { board.scrollBy({ left: -SCROLL_STEP, behavior: 'smooth' }); });
      btnNext.addEventListener('click', function () { board.scrollBy({ left: SCROLL_STEP, behavior: 'smooth' }); });
      board.addEventListener('scroll', atualizarNavBtns, { passive: true });
      atualizarNavBtns();
    }

    /* ── Init: default ao ano corrente ── */
    var anoAtual = String(hoje.getFullYear());
    var radioAnoAtual = wrapper.querySelector('.scal-ano-radio[value="' + anoAtual + '"]');
    if (radioAnoAtual) {
      radioAnoAtual.checked = true;
      filtros.ano = anoAtual;
      atualizarLabelAno();
      filtrarMesesPorAno(anoAtual);
    }
    aplicarFiltros();
  }());

  /* ── Export: Google Calendar / iCal (compartilhado entre instâncias) ── */
  (function () {
    if (window._scalExportInit) return;
    window._scalExportInit = true;

    function pad2(n) { return n < 10 ? '0' + n : '' + n; }

    function parseDtStart(dataInicio, horario) {
      if (!dataInicio) return null;
      var p = dataInicio.split('-');
      if (p.length < 3) return null;
      var base = p[0] + p[1] + p[2];
      if (horario) {
        var t = horario.split(':');
        return base + 'T' + (t[0] || '00') + (t[1] || '00') + '00';
      }
      return base;
    }

    function parseDtEnd(dataInicio, horario) {
      var p = dataInicio.split('-');
      if (horario) {
        var t = horario.split(':');
        var h = parseInt(t[0], 10) + 1;
        return p[0] + p[1] + p[2] + 'T' + pad2(h) + (t[1] || '00') + '00';
      }
      var d = new Date(parseInt(p[0], 10), parseInt(p[1], 10) - 1, parseInt(p[2], 10) + 1);
      return d.getFullYear() + '' + pad2(d.getMonth() + 1) + pad2(d.getDate());
    }

    /* ── Popup global de export (position:fixed para escapar overflow:hidden dos cards) ── */
    var exportPopup = document.getElementById('scal-export-popup');
    var exportActiveTrigger = null;

    function fecharExportPopup() {
      if (!exportPopup.hidden) {
        exportPopup.hidden = true;
        if (exportActiveTrigger) {
          exportActiveTrigger.setAttribute('aria-expanded', 'false');
          exportActiveTrigger = null;
        }
      }
    }

    document.addEventListener('click', function (e) {
      /* Abre/fecha ao clicar no trigger */
      var trigger = e.target.closest('.scal-export-trigger');
      if (trigger) {
        e.preventDefault();
        e.stopPropagation();
        if (exportActiveTrigger === trigger && !exportPopup.hidden) {
          fecharExportPopup();
          return;
        }
        fecharExportPopup();
        exportActiveTrigger = trigger;
        trigger.setAttribute('aria-expanded', 'true');

        /* Posiciona o popup via fixed, acima do botão */
        exportPopup.hidden = false;
        var rect = trigger.getBoundingClientRect();
        var popW = exportPopup.offsetWidth;
        var popH = exportPopup.offsetHeight;
        var top = rect.top - popH - 6;
        var left = rect.right - popW;
        if (top < 6) top = rect.bottom + 6; /* se não cabe acima, coloca abaixo */
        if (left < 6) left = 6;
        exportPopup.style.top  = top + 'px';
        exportPopup.style.left = left + 'px';

        /* Guarda dados do card no popup para uso na opção */
        var card = trigger.closest('[data-nome]');
        exportPopup.dataset.nome       = card ? (card.dataset.nome || '') : '';
        exportPopup.dataset.dataInicio = card ? (card.dataset.dataInicio || '') : '';
        exportPopup.dataset.horario    = card ? (card.dataset.horario || '') : '';
        exportPopup.dataset.url        = card ? (card.dataset.url || '') : '';
        return;
      }

      /* Clique em uma opção */
      var btn = e.target.closest('.scal-export-option[data-export]');
      if (btn && btn.closest('#scal-export-popup')) {
        e.preventDefault();
        e.stopPropagation();
        var nome       = exportPopup.dataset.nome || '';
        var dataInicio = exportPopup.dataset.dataInicio || '';
        var horario    = exportPopup.dataset.horario || '';
        var url        = exportPopup.dataset.url || '';
        var tipo       = btn.dataset.export;
        var dtStart    = parseDtStart(dataInicio, horario);
        var dtEnd      = dataInicio ? parseDtEnd(dataInicio, horario) : null;
        fecharExportPopup();

        if (tipo === 'google') {
          if (!dtStart) return;
          var gcUrl = 'https://calendar.google.com/calendar/render?action=TEMPLATE' +
            '&text=' + encodeURIComponent(nome) +
            '&dates=' + dtStart + '/' + dtEnd +
            (url ? '&details=' + encodeURIComponent(url) : '');
          window.open(gcUrl, '_blank', 'noopener,noreferrer');
        } else if (tipo === 'outlook') {
          if (!dataInicio) return;
          var p = dataInicio.split('-');
          var isoStart = p[0] + '-' + p[1] + '-' + p[2] + (horario ? 'T' + horario + ':00' : 'T00:00:00');
          var hEnd = horario ? pad2(parseInt(horario.split(':')[0], 10) + 1) + ':' + (horario.split(':')[1] || '00') + ':00' : '01:00:00';
          var isoEnd = p[0] + '-' + p[1] + '-' + p[2] + 'T' + hEnd;
          var outlookUrl = 'https://outlook.live.com/calendar/0/deeplink/compose?path=/calendar/action/compose&rru=addevent' +
            '&subject=' + encodeURIComponent(nome) +
            '&startdt=' + encodeURIComponent(isoStart) +
            '&enddt=' + encodeURIComponent(isoEnd) +
            (url ? '&body=' + encodeURIComponent(url) : '');
          window.open(outlookUrl, '_blank', 'noopener,noreferrer');
        }
        return;
      }

      /* Clique fora fecha */
      fecharExportPopup();
    });
  }());
</script>