KCI-CAMPAIGN-TRACKER/app/Views/campaigns/index.php

<section class="content-stack" x-data="campaignTable()">

    <div class="page-toolbar">
        <div class="section-heading">
            <h1><?= e($model->title) ?></h1>
            <p>Manage campaigns and their attribute values.</p>
        </div>
        <a class="button button-primary" href="/campaigns/create">+ New Campaign</a>
    </div>

    <?php if ($model->saved): ?>
        <div class="alert alert-success" x-data="{ open: true }" x-show="open" x-transition.opacity x-init="setTimeout(() => open = false, 3500)">
            Campaign saved successfully.
        </div>
    <?php endif; ?>

    <?php if ($model->deleted): ?>
        <div class="alert alert-success" x-data="{ open: true }" x-show="open" x-transition.opacity x-init="setTimeout(() => open = false, 3500)">
            Campaign deleted.
        </div>
    <?php endif; ?>

    <section class="section-panel">
        <div class="panel-header">
            <div>
                <h2>Campaign Directory</h2>
                <p>All campaigns with their type and attribute data.</p>
            </div>
            <button class="button button-secondary" type="button" x-on:click="reloadTable()">Refresh</button>
        </div>

        <div class="inline-indicator" x-cloak x-show="isLoading">Loading campaigns...</div>
        <div class="alert alert-error" x-cloak x-show="errorMessage" x-text="errorMessage"></div>
        <div id="campaign-table" class="tabulator-host"></div>
    </section>

    <section class="section-panel" x-cloak x-show="selectedCampaignId" x-transition.opacity>
        <div class="panel-header">
            <div>
                <h2>Campaign Jobs</h2>
                <p x-text="selectedCampaignTitle"></p>
            </div>
            <div class="panel-actions">
                <button class="button button-secondary button-sm" type="button" x-on:click="reloadJobsTable()">Refresh</button>
                <button class="button button-secondary button-sm" type="button" x-on:click="closeJobsTable()">Close</button>
            </div>
        </div>

        <div class="inline-indicator" x-show="isJobsLoading">Loading jobs...</div>
        <div class="alert alert-error" x-show="jobsErrorMessage" x-text="jobsErrorMessage"></div>
        <div id="campaign-jobs-drilldown-table" class="tabulator-host"></div>
    </section>

</section>