{% extends "base.html" %}

{% block title %}{{ listview.table.name.title() }} - WorkFrame{% endblock %}

{% block breadcrumbs %}
<nav aria-label="breadcrumb" class="bg-light">
    <div class="container-fluid">
        <ol class="breadcrumb py-2 mb-0">
            <li class="breadcrumb-item">
                <a href="{{ url_for('dashboard') }}">
                    <i class="bi bi-house me-1"></i>Dashboard
                </a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">
                <i class="bi bi-folder me-1"></i>{{ listview.table.name.title() }}
            </li>
        </ol>
    </div>
</nav>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h1 class="h3 mb-0">{{ listview.table.name.title() }}</h1>
        <div class="btn-group">
            <a href="new" class="btn btn-primary">
                <i class="bi bi-plus-lg me-1"></i>Add New
            </a>
            <a href="export.csv" class="btn btn-outline-secondary" title="Export to CSV">
                <i class="bi bi-download me-1"></i>Export CSV
            </a>
        </div>
    </div>
    
    <!-- Search Form -->
    <form method="GET" class="mb-3" data-search>
        <div class="input-group">
            <input type="search" 
                   name="search" 
                   class="form-control" 
                   placeholder="Search {{ listview.table.name }}..." 
                   value="{{ listview.search_query }}"
                   aria-label="Search">
            <button type="submit" class="btn btn-outline-secondary">
                <i class="bi bi-search"></i>
            </button>
        </div>
        {% if listview.sort_field %}
        <input type="hidden" name="sort" value="{{ listview.sort_field }}">
        <input type="hidden" name="order" value="{{ listview.sort_order }}">
        {% endif %}
    </form>
    
    {% if pagination.items %}
    
    <!-- Bulk Actions Bar -->
    <div id="bulk-actions" class="alert alert-info d-none mb-3">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <i class="bi bi-check-square me-2"></i>
                <span id="selected-count">0</span> item(s) selected
            </div>
            <div class="btn-group btn-group-sm">
                <button type="button" class="btn btn-danger" id="bulk-delete-btn">
                    <i class="bi bi-trash me-1"></i>Delete Selected
                </button>
                <button type="button" class="btn btn-outline-secondary" id="clear-selection-btn">
                    <i class="bi bi-x-lg me-1"></i>Clear
                </button>
            </div>
        </div>
    </div>
    
    <!-- Mobile cards -->
    <div class="d-md-none">
        {% for record in pagination.items %}
        <div class="card mb-2">
            <div class="card-body py-2">
                <div class="d-flex justify-content-between align-items-start mb-2">
                    <div class="form-check">
                        <input class="form-check-input bulk-select" type="checkbox" value="{{ record.id }}" id="mobile-check-{{ record.id }}">
                        <label class="form-check-label" for="mobile-check-{{ record.id }}">
                            Select
                        </label>
                    </div>
                </div>
                {% for field in listview.display_fields[:3] %}
                {% set value = listview.format_cell_value(record, field) %}
                {% if value %}
                <div class="d-flex justify-content-between">
                    <span class="text-muted">{{ field.name.replace('_', ' ').title() }}:</span>
                    <span>{{ value }}</span>
                </div>
                {% endif %}
                {% endfor %}
                <div class="mt-2">
                    <a href="{{ record.id }}/" class="btn btn-sm btn-outline-primary me-1">
                        <i class="bi bi-eye"></i> View
                    </a>
                    <a href="{{ record.id }}/edit" class="btn btn-sm btn-outline-secondary">
                        <i class="bi bi-pencil"></i> Edit
                    </a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    
    <!-- Desktop table -->
    <div class="table-responsive d-none d-md-block">
        <table class="table table-hover">
            <thead class="table-dark">
                <tr>
                    <th scope="col" width="40">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="select-all">
                            <label class="form-check-label" for="select-all">
                                <span class="visually-hidden">Select All</span>
                            </label>
                        </div>
                    </th>
                    {% for field in listview.display_fields %}
                    <th scope="col">
                        <a href="{{ listview.get_sort_url(field.name) }}" class="text-decoration-none text-white">
                            {{ field.name.replace('_', ' ').title() }}
                            <i class="bi {{ listview.get_sort_icon(field.name) }} ms-1"></i>
                        </a>
                    </th>
                    {% endfor %}
                    <th scope="col" width="120">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for record in pagination.items %}
                <tr>
                    <td>
                        <div class="form-check">
                            <input class="form-check-input bulk-select" type="checkbox" value="{{ record.id }}" id="check-{{ record.id }}">
                            <label class="form-check-label" for="check-{{ record.id }}">
                                <span class="visually-hidden">Select Record</span>
                            </label>
                        </div>
                    </td>
                    {% for field in listview.display_fields %}
                    <td>{{ listview.format_cell_value(record, field) }}</td>
                    {% endfor %}
                    <td>
                        <div class="btn-group btn-group-sm">
                            <a href="{{ record.id }}/" class="btn btn-outline-primary">
                                <i class="bi bi-eye"></i>
                            </a>
                            <a href="{{ record.id }}/edit" class="btn btn-outline-secondary">
                                <i class="bi bi-pencil"></i>
                            </a>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    
    <!-- Pagination -->
    {% if pagination.pages > 1 %}
    <nav aria-label="Page navigation">
        <ul class="pagination pagination-sm justify-content-center">
            <!-- Previous button -->
            {% if pagination.has_prev %}
            <li class="page-item">
                <a class="page-link" href="{{ listview.get_page_url(pagination.prev_num) }}">
                    <i class="bi bi-chevron-left"></i>
                </a>
            </li>
            {% else %}
            <li class="page-item disabled">
                <span class="page-link"><i class="bi bi-chevron-left"></i></span>
            </li>
            {% endif %}
            
            <!-- Page numbers -->
            {% set start_page = [1, pagination.page - 2]|max %}
            {% set end_page = [pagination.pages, start_page + 4]|min %}
            {% for page_num in range(start_page, end_page + 1) %}
                {% if page_num == pagination.page %}
                <li class="page-item active">
                    <span class="page-link">{{ page_num }}</span>
                </li>
                {% else %}
                <li class="page-item">
                    <a class="page-link" href="{{ listview.get_page_url(page_num) }}">{{ page_num }}</a>
                </li>
                {% endif %}
            {% endfor %}
            
            <!-- Next button -->
            {% if pagination.has_next %}
            <li class="page-item">
                <a class="page-link" href="{{ listview.get_page_url(pagination.next_num) }}">
                    <i class="bi bi-chevron-right"></i>
                </a>
            </li>
            {% else %}
            <li class="page-item disabled">
                <span class="page-link"><i class="bi bi-chevron-right"></i></span>
            </li>
            {% endif %}
        </ul>
        <div class="text-center text-muted small mt-2">
            Showing {{ pagination.per_page * (pagination.page - 1) + 1 }} to {{ [pagination.per_page * pagination.page, pagination.total]|min }} of {{ pagination.total }} entries
        </div>
    </nav>
    {% endif %}
    
    {% else %}
    <div class="text-center text-muted mt-5">
        <i class="bi bi-folder-x display-4 mb-3"></i>
        <h5>No {{ listview.table.name }} found</h5>
        {% if listview.search_query %}
        <p>No results found for "{{ listview.search_query }}"</p>
        <a href="{{ url_for(request.endpoint) }}" class="btn btn-outline-secondary">Clear Search</a>
        {% else %}
        <p>Get started by adding your first {{ listview.table.name|lower }}.</p>
        {% endif %}
    </div>
    {% endif %}
</div>

<style>
/* Mobile-first optimizations */
@media (max-width: 767px) {
    .btn-group-sm .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }
}

/* Card hover effects */
.card:hover {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transform: translateY(-1px);
    transition: all 0.2s ease-in-out;
}

/* Table sorting - improved contrast for dark headers */
thead.table-dark th a,
.table-dark thead th a,
.table-dark th a {
    color: #ffffff !important;
    text-decoration: none !important;
}

thead.table-dark th a:hover,
.table-dark thead th a:hover,
.table-dark th a:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px;
    padding: 2px 4px;
    margin: -2px -4px;
}

/* Bulk selection */
.bulk-select:checked + label {
    font-weight: bold;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const selectAllCheckbox = document.getElementById('select-all');
    const bulkSelects = document.querySelectorAll('.bulk-select');
    const bulkActionsBar = document.getElementById('bulk-actions');
    const selectedCountSpan = document.getElementById('selected-count');
    const bulkDeleteBtn = document.getElementById('bulk-delete-btn');
    const clearSelectionBtn = document.getElementById('clear-selection-btn');
    
    function updateBulkUI() {
        const selectedItems = document.querySelectorAll('.bulk-select:checked');
        const count = selectedItems.length;
        
        selectedCountSpan.textContent = count;
        
        if (count > 0) {
            bulkActionsBar.classList.remove('d-none');
        } else {
            bulkActionsBar.classList.add('d-none');
        }
        
        // Update select all checkbox
        if (selectAllCheckbox) {
            selectAllCheckbox.indeterminate = count > 0 && count < bulkSelects.length;
            selectAllCheckbox.checked = count === bulkSelects.length && count > 0;
        }
    }
    
    // Handle individual checkbox changes
    bulkSelects.forEach(checkbox => {
        checkbox.addEventListener('change', updateBulkUI);
    });
    
    // Handle select all checkbox
    if (selectAllCheckbox) {
        selectAllCheckbox.addEventListener('change', function() {
            const checked = this.checked;
            bulkSelects.forEach(checkbox => {
                checkbox.checked = checked;
            });
            updateBulkUI();
        });
    }
    
    // Handle clear selection
    if (clearSelectionBtn) {
        clearSelectionBtn.addEventListener('click', function() {
            bulkSelects.forEach(checkbox => {
                checkbox.checked = false;
            });
            updateBulkUI();
        });
    }
    
    // Handle bulk delete
    if (bulkDeleteBtn) {
        bulkDeleteBtn.addEventListener('click', function() {
            const selectedItems = document.querySelectorAll('.bulk-select:checked');
            const ids = Array.from(selectedItems).map(cb => cb.value);
            
            if (ids.length === 0) return;
            
            const confirmMsg = `Are you sure you want to delete ${ids.length} item(s)?`;
            const detailsMsg = `This action cannot be undone. The selected records will be permanently removed from the database.`;
            
            WorkFrame.showConfirmation(confirmMsg, detailsMsg, 'Delete Items', 'btn-danger', function() {
                // Create form and submit for bulk delete
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = 'bulk-delete';
                
                // Add CSRF token if available
                const csrfToken = document.querySelector('meta[name=csrf-token]');
                if (csrfToken) {
                    const csrfInput = document.createElement('input');
                    csrfInput.type = 'hidden';
                    csrfInput.name = 'csrf_token';
                    csrfInput.value = csrfToken.getAttribute('content');
                    form.appendChild(csrfInput);
                }
                
                // Add selected IDs
                ids.forEach(id => {
                    const input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = 'ids';
                    input.value = id;
                    form.appendChild(input);
                });
                
                document.body.appendChild(form);
                form.submit();
            });
        });
    }
    
    // Initialize UI state
    updateBulkUI();
});
</script>
{% endblock %}