ATS/templates/includes/_list_view_switcher.html

{% load i18n %}
<div class="flex justify-between items-center mb-3">
    <div class="inline-flex rounded-lg overflow-hidden" role="group">
        <button type="button" class="view-toggle active inline-flex items-center gap-2 px-4 py-2 text-sm font-medium border border-r-0 transition" data-view="table" data-list-id="{{ list_id }}">
            <i data-lucide="table" class="w-4 h-4"></i> {% trans "Table" %}
        </button>
        <button type="button" class="view-toggle inline-flex items-center gap-2 px-4 py-2 text-sm font-medium border border-l-0 transition" data-view="card" data-list-id="{{ list_id }}">
            <i data-lucide="layout-grid" class="w-4 h-4"></i> {% trans "Card" %}
        </button>
    </div>
</div>

<style>
/* View Toggle Styles */
.view-toggle {
    border-color: #d1d5db;
    color: #4b5563;
    background-color: white;
}
.view-toggle:hover {
    background-color: #f3f4f6;
}
.view-toggle.active {
    background-color: #b91c1c;
    border-color: #b91c1c;
    color: white;
}
.view-toggle.active:hover {
    background-color: #991b1b;
}

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

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

/* Card View Styles */
.card-view .card {
    border: 1px solid #e5e7eb;
    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: #b91c1c;
    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: #b91c1c;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.card-view .card-text {
    color: #374151;
    margin-bottom: 1rem;
}
.card-view .card-footer {
    padding: 0.75rem 1.25rem;
    background-color: #f8f9fa;
    border-top: 1px solid #e5e7eb;
    border-radius: 0 0 0.75rem 0.75rem;
}

/* Table View Styles */
.table-view .table-responsive {
    border-radius: 0.5rem;
    overflow: hidden;
}
.table-view .table {
    margin-bottom: 0;
    width: 100%;
}
.table-view .table thead th {
    background-color: #b91c1c;
    color: white;
    border-color: #e5e7eb;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    padding: 1rem;
    text-align: left;
}
.table-view .table tbody td {
    padding: 1rem;
    vertical-align: middle;
    border-color: #e5e7eb;
}
.table-view .table tbody tr {
    transition: background-color 0.2s;
}
.table-view .table tbody tr:hover {
    background-color: #f9fafb;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const listContainer = document.getElementById('{{ list_id }}');
    if (!listContainer) return;

    const listId = listContainer.id;
    const savedView = localStorage.getItem(`list_view_${listId}`) || 'table';

    setView(savedView);

    document.querySelectorAll('.view-toggle').forEach(button => {
        if (button.getAttribute('data-list-id') === listId) {
            button.addEventListener('click', function() {
                const view = this.getAttribute('data-view');
                setView(view);
            });
        }
    });

    function setView(view) {
        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');
            }
        });

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

        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');
        }

        localStorage.setItem(`list_view_${listId}`, view);
    }
});

// Initialize Lucide icons
lucide.createIcons();
</script>