<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a id="breadcrumbActivities" href="?">Início</a></li>
        <li class="breadcrumb-item active" aria-current="page"><a id="breadcrumbEvents" href="?"></a></li>
    </ol>
</nav>

<div class="card shadow mb-4">
    <div class="card-header py-3">
        <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="btn btn-light nav-link d-flex align-items-center justify-content-center active" id="pillsEvents_button" data-bs-toggle="pill" data-bs-target="#pillsEvents_tab" type="button" role="tab" aria-controls="pillsEvents" aria-selected="true"><span class="fs-5">Eventos</span></button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="btn btn-light nav-link d-flex align-items-center justify-content-center" id="pillsEventResources_button" data-bs-toggle="pill" data-bs-target="#pillsEventResources_tab" type="button" role="tab" aria-controls="pillsEventResources" aria-selected="true"><span class="fs-5">Recursos</span></button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="btn btn-light nav-link d-flex align-items-center justify-content-center" id="pillsBookings_button" data-bs-toggle="pill" data-bs-target="#pillsBookings_tab" type="button" role="tab" aria-controls="pillsBookings" aria-selected="false"><span class="fs-5">Inscrições</span></button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="btn btn-light nav-link d-flex align-items-center justify-content-center" id="pillsConfiguration_button" data-bs-toggle="pill" data-bs-target="#pillsConfiguration_tab" type="button" role="tab" aria-controls="pillsConfiguration" aria-selected="true"><span class="fs-5">Configuração da atividade</span></button>
            </li>
        </ul>
    </div>

    <div class="tab-content" id="pills-tabContent">

        <div class="tab-pane fade show active" id="pillsEvents_tab" role="tabpanel" aria-labelledby="pillsEvents_button">
            <div class="card-header py-3 d-flex align-items-center">
                <div class="ms-auto d-flex gap-2">
                    <button type="button" class="btn btn-outline-secondary" id="clearEventsFilter">Limpar filtros</button>
                </div>
            </div>        
            <div class="card-body">
                <p id="pageActivities_pTitle"></p>
                <div class="datatable table-responsive">
                    <table class="display" id="tableEvents" width="100%" cellspacing="0"><caption>Eventos</caption></table>
                </div>
            </div>
            <div class="card-body">
                <p id="pageHistory_pTitle"></p>
                <div class="datatable table-responsive">
                    <table class="display" id="tableEventsHistory" width="100%" cellspacing="0"><caption>Histórico de eventos</caption></table>
                </div>
            </div>
            <div class="card-footer">
                <h7 class="m-0 text-gray-600">
                    <strong>Instruções</strong><br />
                    <br />
                </h7>
            </div>
        </div>

        <div class="tab-pane fade show active" id="pillsEventResources_tab" role="tabpanel" aria-labelledby="pillsResources_button">
            <div class="card-header py-3 d-flex align-items-center">
                <div class="ms-auto d-flex gap-2">
                    <button type="button" class="btn btn-outline-secondary" id="clearEventResourcesFilter">Limpar filtros</button>
                </div>
            </div>        
            <div class="card-body">
                <p id="pageActivities_pSessionsTitle"></p>
                <div class="datatable table-responsive">
                    <table class="display" id="tableActivityInfoSessions" width="100%" cellspacing="0"><caption>Sessions</caption></table>
                </div>
            </div>
            <div class="card-body">
                <p id="pageActivities_pMealsTitle"></p>
                <div class="datatable table-responsive">
                    <table class="display" id="tableActivityInfoMeals" width="100%" cellspacing="0"><caption>Meals</caption></table>
                </div>
            </div>
            <div class="card-body">
                <p id="pageActivities_pAccommodationsTitle"></p>
                <div class="datatable table-responsive">
                    <table class="display" id="tableActivityInfoAccommodations" width="100%" cellspacing="0"><caption>Accommodations</caption></table>
                </div>
            </div>
            <div class="card-footer">
                <h7 class="m-0 text-gray-600">
                    <strong>Instruções</strong><br />
                </h7>
            </div>
        </div>

        <div class="tab-pane fade" id="pillsEventBookings_tab" role="tabpanel" aria-labelledby="pillsBookings_button">
            <div class="card-header py-3 d-flex align-items-center">
                <div class="ms-auto d-flex gap-2">
                    <button type="button" class="btn btn-success" id="buttonBookingCreate">Criar inscrição</button>
                    <button type="button" class="btn btn-success" id="buttonSessionLinkSend">Enviar link zoom</button>
                    <button type="button" class="btn btn-outline-dark" data-bs-toggle="button" autocomplete="off" id="buttonCompactExpand">Compacta/Expandida</button>
                    <button type="button" class="btn btn-outline-secondary" id="cleaEventBookingsrFilter">Limpar filtros</button>
                </div>
            </div>
            <div class="card-body">
                <p id="pageBookings_pTitle"></p>
                <div class="datatable table-responsive">
                    <table class="display" id="tableBookings" width="100%" cellspacing="0"><caption>Inscrições atuais</caption></table>
                </div>
            </div>
            <div class="card-footer">
                <h7 class="m-0 text-gray-600">
                    <strong>Instruções</strong><br />
                    A geração de passes/CSV é feita apenas para as linhas visíveis.<br />
                    É possível aplicar filtros, que escondem linhas, usando as caixas de texto Search e no topo de cada coluna.<br />
                    Exemplos regex para filtros:<br />- Dívida 0€: <strong>^0</strong><br />- Com dívida: <strong>^[1-9]</strong><br />- Número 54: <strong>^54$</strong><br />- Números maiores do que 54: <strong>^(5[4-9]|[6-9]\d|\d{3,})$</strong><br />- Número 21 e 37:<strong>^21|37$</strong><br />- "Ana" mas não "Anabela": <strong>\bAna\b</strong><br />- Com concessão: <strong>^[A-Z]</strong><br />- Sem concessão: <strong>^\s+$</strong>
                </h7>
            </div>            
        </div>

        <div class="tab-pane fade" id="pillsConfiguration_tab" role="tabpanel" aria-labelledby="pillsConfiguration_button">
            <div class="card-header py-3 d-flex align-items-center">
                <div class="ms-auto d-flex gap-2">
                    <button type="button" class="btn btn-warning" id="cloneActivity">Clonar atividade</button>
                </div>
            </div>        
            <div class="card-body">
            </div>
            <div class="card-footer">
                <h7 class="m-0 text-gray-600">
                    <strong>Instruções</strong><br />
                    <br />
                </h7>
            </div>
        </div>

    </div>
</div>

<!-- Modal Clone Activity -->
<div class="modal fade" id="modalCloneActivity" tabindex="-1" role="dialog" aria-labelledby="modalCloneActivityLabel" aria-hidden="false">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalCloneActivityLabel">Clonar atividade selecionada</h5>
      </div>
      <div class="modal-body">
        <form id="formCloneActivity">
          <div class="form-check">
              <label for="activityClone">Atividade a clonar</label>
              <input id="activityClone" name="activityClone" class="form-control" type="text" readonly required />
          </div>
          <div class="form-check">
              <label for="activityTitle">Nome da nova atividade</label>
              <input id="activityTitle" name="activityTitle" class="form-control" type="text" required />
              <span id="endDateSelected"></span>
          </div>
          <div class="form-check">
              <label for="startDate">Data da nova atividade</label>
              <input id="startDate" name="startDate" class="form-control" type="date" required />
              <span id="startDateSelected"></span>
          </div>
          <br />
          <button type="submit" class="btn btn-primary">Clonar</button>
          <button type="button" class="btn btn-outline-secondary" id="cancelCloneActivity">Cancelar</button>
        </form>
      </div>
      <div class="modal-footer">
      </div>
    </div>
  </div>
</div>
