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

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

    <div class="page-toolbar">
        <div class="section-heading">
            <h1><?= e($model->title) ?></h1>
            <p>Manage customers and their attribute values.</p>
        </div>
        <a class="button button-primary" href="/customers/create">+ New Customer</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)">
            Customer 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)">
            Customer deleted.
        </div>
    <?php endif; ?>

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

        <div class="skeleton-rows" x-cloak x-show="isLoading">
            <div class="skeleton-row"></div>
            <div class="skeleton-row"></div>
            <div class="skeleton-row"></div>
            <div class="skeleton-row"></div>
            <div class="skeleton-row"></div>
        </div>
        <div class="alert alert-error" x-cloak x-show="errorMessage" x-text="errorMessage"></div>
        <div id="customer-table" class="tabulator-host"></div>
    </section>

</section>