<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item active"><a id="breadcrumbActivities" href="?">Início</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="pillsActivities_button" data-bs-toggle="pill" data-bs-target="#pillsActivities_tab" type="button" role="tab" aria-controls="pillsActivities" aria-selected="true"><span class="fs-5">Atividades</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 geral</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" 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 class="tab-content" id="pills-tabContent">
        <div class="tab-pane fade show active" id="pillsActivities_tab" role="tabpanel" aria-labelledby="pillsActivities_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="clearActivitiesFilter">Limpar</button>
                </div>
            </div>        
            <div class="card-body">
                <p id="pageActivities_pTitle"></p>
                <div class="datatable table-responsive">
                    <table class="display" id="tableActivities" width="100%" cellspacing="0"><caption>Atividades</caption></table>
                </div>
            </div>
            <div class="card-body">
                <p id="pageHistory_pTitle"></p>
                <div class="datatable table-responsive">
                    <table class="display" id="tableActivitiesHistory" width="100%" cellspacing="0"><caption>Histórico de atividades</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" id="pillsConfiguration_tab" role="tabpanel" aria-labelledby="pillsActivities_button">
            <div class="card-header py-3 d-flex align-items-center">
                <div class="ms-auto d-flex gap-2">
                </div>
            </div>        
            <div class="card-body">
            </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>
