{# calendar_popup.html - Componente riutilizzabile per mostrare un popup calendario #}
<div id="{{ popup_id }}" style="display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2000;background:#fff;padding:10px;border:2px solid #007bff;box-shadow:0 2px 10px #888;border-radius:8px;max-width:800px;">
  <div id="{{ calendar_id }}" style="width:700px;height:500px;"></div>
  <button onclick="document.getElementById('{{ popup_id }}').style.display='none'" style="margin-top:8px;background:var(--primary-color,#007bff);color:#fff;border:none;padding:6px 18px;border-radius:6px;cursor:pointer;">Close</button>
</div>
<link href="https://cdn.jsdelivr.net/npm/@fullcalendar/core@6.1.10/index.global.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@6.1.10/index.global.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/core@6.1.10/index.global.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@6.1.10/index.global.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  var btn = document.getElementById('{{ button_id }}');
  var popup = document.getElementById('{{ popup_id }}');
  btn.addEventListener('click', function() {
    popup.style.display = 'block';
    if (!window['{{ calendar_id }}_initialized']) {
      var calendarEl = document.getElementById('{{ calendar_id }}');
      var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        locale: 'en',
        initialDate: '{{ initial_date }}',
        events: {
          url: '/api/calendar-events/',
          method: 'GET',
        },
        height: 480,
        contentHeight: 480,
        aspectRatio: 1.4,
      });
      calendar.render();
      window['{{ calendar_id }}_initialized'] = true;
    }
  });
});
</script>