kaauh_ats/templates/includes/_list_view_switcher.html

<div class="d-flex justify-content-between align-items-center mb-3">
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-outline-primary btn-sm view-toggle active" data-view="table" data-list-id="{{ list_id }}">
            <i class="fas fa-table me-1"></i> Table
        </button>
        <button type="button" class="btn btn-outline-primary btn-sm view-toggle" data-view="card" data-list-id="{{ list_id }}">
            <i class="fas fa-th me-1"></i> Card
        </button>
    </div>
</div>

<style>
/* View Toggle Styles */
.view-toggle {
    border-radius: 0.25rem;
    margin-right: 0.25rem;
}
.view-toggle.active {
    background-color: var(--kaauh-teal);
    border-color: var(--kaauh-teal);
    color: white;
}
.view-toggle.active:hover {
    background-color: var(--kaauh-teal-dark);
    border-color: var(--kaauh-teal-dark);
}

/* Hide elements by default */
.table-view,
.card-view {
    display: none;
}

/* Show active view */
.table-view.active,
.card-view.active {
    display: block;
}

/* Card View Styles */
.card-view .card {
    border: 1px solid var(--kaauh-border);
    border-radius: 0.75rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    background-color: white;
    transition: transform 0.2s, box-shadow 0.2s;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.card-view .card-header {
    background-color: var(--kaauh-teal-dark);
    color: white;
    font-weight: 600;
    padding: 1rem 1.25rem;
    border-radius: 0.75rem 0.75rem 0 0;
}
.card-view .card-body {
    padding: 1.25rem;
    flex-grow: 1;
}
.card-view .card-title {
    color: var(--kaauh-teal-dark);
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.card-view .card-text {
    color: var(--kaauh-primary-text);
    margin-bottom: 1rem;
}
.card-view .card-footer {
    padding: 0.75rem 1.25rem;
    background-color: #f8f9fa;
    border-top: 1px solid var(--kaauh-border);
    border-radius: 0 0 0.75rem 0.75rem;
}
.card-view .btn-sm {
    font-size: 0.8rem;
    padding: 0.3rem 0.6rem;
}

/* Table View Styles */
.table-view .table-responsive {
    border-radius: 0.5rem;
    overflow: hidden;
}
.table-view .table {
    margin-bottom: 0;
}
.table-view .table thead th {
    background-color: var(--kaauh-teal-dark);
    color: white;
    border-color: var(--kaauh-border);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    padding: 1rem;
}
.table-view .table tbody td {
    padding: 1rem;
    vertical-align: middle;
    border-color: var(--kaauh-border);
}
.table-view .table tbody tr {
    transition: background-color 0.2s;
}
.table-view .table tbody tr:hover {
    background-color: var(--kaauh-gray-light);
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Get the list ID from the data attribute
    const listId = document.querySelector('.view-toggle').getAttribute('data-list-id');
    const listContainer = document.getElementById(listId);

    // Get saved view preference from localStorage
    const savedView = localStorage.getItem(`list_view_${listId}`) || 'table';

    // Set initial view
    setView(savedView);

    // Add click event listeners to view toggle buttons
    document.querySelectorAll('.view-toggle').forEach(button => {
        button.addEventListener('click', function() {
            const view = this.getAttribute('data-view');
            setView(view);
        });
    });

    function setView(view) {
        // Update button states
        document.querySelectorAll('.view-toggle').forEach(button => {
            if (button.getAttribute('data-view') === view) {
                button.classList.add('active');
            } else {
                button.classList.remove('active');
            }
        });

        // Update view visibility
        const tableView = listContainer.querySelector('.table-view');
        const cardView = listContainer.querySelector('.card-view');

        if (view === 'table') {
            tableView.classList.add('active');
            cardView.classList.remove('active');
        } else {
            tableView.classList.remove('active');
            cardView.classList.add('active');
        }

        // Save preference to localStorage
        localStorage.setItem(`list_view_${listId}`, view);
    }
});
</script>