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 Switcher Styles (Consolidated & Corrected) --- */

/* 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 !important; /* Use !important to ensure hiding works */
}

/* Show active view */
.table-view.active {
    display: block !important;
}
.card-view.active {
    /* Rely on the 'row' class which uses display: flex for proper column alignment. */
    display: flex !important; /* rows often use display: flex in Bootstrap */
    flex-wrap: wrap !important;
}

/* 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;
}
/* NOTE: We need to assume var(--kaauh-gray-light) is defined in base.html or job_list.html */
.table-view .table tbody tr:hover {
    background-color: #f0f0f0; /* Fallback color for hover */
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const listContainer = document.getElementById('{{ list_id }}');
    if (!listContainer) return; // Exit if container isn't found

    // Get list ID from the data attribute (or use the variable from Django context if the button is loaded)
    const listId = listContainer.id; 

    // 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 => {
        // Ensure the button belongs to this list (optional check)
        if (button.getAttribute('data-list-id') === listId) { 
            button.addEventListener('click', function() {
                const view = this.getAttribute('data-view');
                setView(view);
            });
        }
    });

    function setView(view) {
        // Update button states
        document.querySelectorAll('.view-toggle[data-list-id="{{ list_id }}"]').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');

        // Apply active class to the correct container
        if (view === 'table') {
            if (tableView) tableView.classList.add('active');
            if (cardView) cardView.classList.remove('active');
        } else {
            if (tableView) tableView.classList.remove('active');
            if (cardView) cardView.classList.add('active');
        }

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