{% extends 'base.html' %}
{% load static %}

{% block title %}Work History | Fox Fitt{% endblock %}

{% block content %}
<!-- === WORK HISTORY PAGE ===
     Two view modes: List (table) and Calendar (monthly grid).
     Filters apply to both modes.
     Calendar mode shows a month grid where each day cell lists the work logs.
     Click a day cell to see full details in a panel below the calendar. -->

<div class="container py-4">

    {# === PAGE HEADER with view toggle and export === #}
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0" style="font-family: 'Poppins', sans-serif;">Work History</h1>
        <div class="d-flex gap-2">
            {# View toggle — List vs Calendar #}
            <div class="btn-group" role="group" aria-label="View mode">
                <a href="?view=list{{ filter_params }}"
                   class="btn btn-sm {% if view_mode == 'list' %}btn-accent{% else %}btn-outline-secondary{% endif %}">
                    <i class="fas fa-list me-1"></i> List
                </a>
                <a href="?view=calendar{{ filter_params }}"
                   class="btn btn-sm {% if view_mode == 'calendar' %}btn-accent{% else %}btn-outline-secondary{% endif %}">
                    <i class="fas fa-calendar-alt me-1"></i> Calendar
                </a>
            </div>

            {# CSV Export button — keeps the current filters in the export URL #}
            <a href="{% url 'export_work_log_csv' %}?worker={{ selected_worker }}&project={{ selected_project }}&status={{ selected_status }}"
               class="btn btn-outline-success btn-sm shadow-sm">
                <i class="fas fa-file-csv me-1"></i> Export CSV
            </a>
            <a href="{% url 'home' %}" class="btn btn-outline-secondary btn-sm shadow-sm">
                <i class="fas fa-arrow-left fa-sm me-1"></i> Back
            </a>
        </div>
    </div>

    {# === FILTER BAR === #}
    <div class="card shadow-sm border-0 mb-4{% if has_active_filters %} border-start border-3{% endif %}" {% if has_active_filters %}style="border-left-color: var(--accent, #10b981) !important;"{% endif %}>
        <div class="card-body py-3">
            <form method="GET" action="{% url 'work_history' %}" class="row g-2 align-items-end">
                {# Preserve current view mode when filtering #}
                <input type="hidden" name="view" value="{{ view_mode }}">
                {% if view_mode == 'calendar' %}
                {# Preserve current calendar month when filtering #}
                <input type="hidden" name="year" value="{{ curr_year }}">
                <input type="hidden" name="month" value="{{ curr_month }}">
                {% endif %}

                {# Filter by Worker #}
                <div class="col-md-3">
                    <label class="form-label small text-muted mb-1">Worker</label>
                    <select name="worker" class="form-select form-select-sm">
                        <option value="">All Workers</option>
                        {% for w in filter_workers %}
                        <option value="{{ w.id }}" {% if selected_worker == w.id|stringformat:"d" %}selected{% endif %}>
                            {{ w.name }}
                        </option>
                        {% endfor %}
                    </select>
                </div>

                {# Filter by Project #}
                <div class="col-md-3">
                    <label class="form-label small text-muted mb-1">Project</label>
                    <select name="project" class="form-select form-select-sm">
                        <option value="">All Projects</option>
                        {% for p in filter_projects %}
                        <option value="{{ p.id }}" {% if selected_project == p.id|stringformat:"d" %}selected{% endif %}>
                            {{ p.name }}
                        </option>
                        {% endfor %}
                    </select>
                </div>

                {# Filter by Payment Status #}
                <div class="col-md-3">
                    <label class="form-label small text-muted mb-1">Payment Status</label>
                    <select name="status" class="form-select form-select-sm">
                        <option value="" {% if not selected_status %}selected{% endif %}>All</option>
                        <option value="paid" {% if selected_status == 'paid' %}selected{% endif %}>Paid</option>
                        <option value="unpaid" {% if selected_status == 'unpaid' %}selected{% endif %}>Unpaid</option>
                    </select>
                </div>

                {# Filter + Clear Buttons #}
                <div class="col-md-3 d-flex gap-2">
                    <button type="submit" class="btn btn-sm btn-accent">
                        <i class="fas fa-filter me-1"></i> Filter
                    </button>
                    {% if has_active_filters %}
                    <a href="{% url 'work_history' %}?view={{ view_mode }}" class="btn btn-sm btn-outline-danger">
                        <i class="fas fa-times me-1"></i> Clear
                    </a>
                    {% endif %}
                </div>
            </form>

            {# === Active Filter Feedback === #}
            {# Shows a results counter when filters are active so the user can see the filter is working #}
            {% if has_active_filters %}
            <div class="mt-2 d-flex align-items-center flex-wrap gap-2">
                <small class="text-muted">
                    <i class="fas fa-info-circle me-1"></i>
                    Showing <strong>{{ filtered_log_count }}</strong> of {{ total_log_count }} work log{{ total_log_count|pluralize }}
                </small>
                {# Show which filters are active as small badges #}
                {% if selected_worker %}
                <span class="badge bg-primary bg-opacity-10 text-primary border border-primary border-opacity-25">
                    <i class="fas fa-user fa-xs me-1"></i>
                    {% for w in filter_workers %}{% if w.id|stringformat:"d" == selected_worker %}{{ w.name }}{% endif %}{% endfor %}
                </span>
                {% endif %}
                {% if selected_project %}
                <span class="badge bg-success bg-opacity-10 text-success border border-success border-opacity-25">
                    <i class="fas fa-project-diagram fa-xs me-1"></i>
                    {% for p in filter_projects %}{% if p.id|stringformat:"d" == selected_project %}{{ p.name }}{% endif %}{% endfor %}
                </span>
                {% endif %}
                {% if selected_status %}
                <span class="badge bg-warning bg-opacity-10 text-dark border border-warning border-opacity-25">
                    <i class="fas fa-tag fa-xs me-1"></i>
                    {{ selected_status|capfirst }}
                </span>
                {% endif %}
            </div>
            {% endif %}
        </div>
    </div>


    {% if view_mode == 'calendar' %}
    {# =============================================================== #}
    {# === CALENDAR VIEW === #}
    {# =============================================================== #}

    {# Month navigation header #}
    <div class="card shadow-sm border-0 mb-3">
        <div class="card-body py-2">
            <div class="d-flex justify-content-between align-items-center">
                <a href="?view=calendar&year={{ prev_year }}&month={{ prev_month }}{{ filter_params }}"
                   class="btn btn-sm btn-outline-secondary">
                    <i class="fas fa-chevron-left"></i>
                </a>
                <h5 class="mb-0 fw-bold" style="font-family: 'Poppins', sans-serif;">
                    {{ month_name }}
                </h5>
                <a href="?view=calendar&year={{ next_year }}&month={{ next_month }}{{ filter_params }}"
                   class="btn btn-sm btn-outline-secondary">
                    <i class="fas fa-chevron-right"></i>
                </a>
            </div>
        </div>
    </div>

    {# Calendar grid #}
    <div class="card shadow-sm border-0 mb-3">
        <div class="card-body p-0 p-md-3">
            {# Day-of-week header row #}
            <div class="row g-0 d-none d-md-flex text-center fw-bold text-secondary border-bottom pb-2 mb-2" style="font-size: 0.85rem;">
                <div class="col">Mon</div>
                <div class="col">Tue</div>
                <div class="col">Wed</div>
                <div class="col">Thu</div>
                <div class="col">Fri</div>
                <div class="col">Sat</div>
                <div class="col">Sun</div>
            </div>

            {# Calendar weeks — each row is 7 day cells #}
            {% for week in calendar_weeks %}
            <div class="row g-0 g-md-1 mb-0 mb-md-1">
                {% for day in week %}
                <div class="col cal-day {% if not day.is_current_month %}cal-day--other{% endif %}{% if day.is_today %} cal-day--today{% endif %}{% if day.count > 0 %} cal-day--has-logs{% endif %}"
                     {% if day.count > 0 %}data-date="{{ day.date|date:'Y-m-d' }}"{% endif %}>
                    {# Day number + badge count #}
                    <div class="d-flex justify-content-between align-items-start">
                        <span class="cal-day__number {% if day.is_today %}fw-bold{% endif %}">{{ day.day }}</span>
                        {% if day.count > 0 %}
                        <span class="badge bg-primary rounded-pill" style="font-size: 0.65rem;">{{ day.count }}</span>
                        {% endif %}
                    </div>
                    {# Mini log indicators (show first 3 entries) #}
                    {% for log in day.records|slice:":3" %}
                    <div class="cal-entry text-truncate" title="{{ log.project.name }}">
                        <small>
                            {% if log.payroll_records.exists %}
                            <i class="fas fa-check-circle text-success" style="font-size: 0.55rem;"></i>
                            {% else %}
                            <i class="fas fa-clock text-warning" style="font-size: 0.55rem;"></i>
                            {% endif %}
                            {{ log.project.name }}
                        </small>
                    </div>
                    {% endfor %}
                    {# "and X more" indicator #}
                    {% if day.count > 3 %}
                    <div class="cal-entry">
                        <small class="text-muted">+{{ day.count|add:"-3" }} more</small>
                    </div>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
            {% endfor %}
        </div>
    </div>

    {# === Day Detail Panel === #}
    {# Hidden by default. Click day cells to select them — shows combined details with totals. #}
    <div class="card shadow-sm border-0 d-none" id="dayDetailPanel">
        <div class="card-header py-2 bg-white">
            <div class="d-flex justify-content-between align-items-center">
                <h6 class="mb-0 fw-bold" id="dayDetailTitle">
                    <i class="fas fa-calendar-day me-2"></i>Details
                </h6>
                <div class="d-flex gap-2 align-items-center">
                    <span class="badge bg-primary rounded-pill d-none" id="daySelectionCount"></span>
                    <button type="button" class="btn btn-sm btn-outline-secondary" id="clearDaySelection"
                            title="Clear selection">
                        <i class="fas fa-times-circle me-1"></i> Clear
                    </button>
                </div>
            </div>
            {# Hint text for multi-select #}
            <small class="text-muted d-block mt-1" id="multiSelectHint">
                <i class="fas fa-info-circle me-1"></i>Click more days to add them to the selection
            </small>
        </div>
        <div class="card-body p-0" id="dayDetailBody">
            {# Content built by JavaScript #}
        </div>
        {# === Totals Footer (admin only, shown when days are selected) === #}
        {% if is_admin %}
        <div class="card-footer bg-white border-top d-none" id="dayDetailFooter">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <strong>Total:</strong>
                    <span class="text-muted ms-2" id="totalDays">0 days</span>
                    <span class="text-muted mx-1">·</span>
                    <span class="text-muted" id="totalLogs">0 logs</span>
                    <span class="text-muted mx-1">·</span>
                    <span class="text-muted" id="totalWorkers">0 unique workers</span>
                </div>
                <div>
                    <strong class="fs-5" style="color: var(--accent-color, #10b981);" id="totalAmount">R 0.00</strong>
                </div>
            </div>
        </div>
        {% endif %}
    </div>

    {# Pass calendar detail data to JavaScript safely using json_script #}
    {{ calendar_detail|json_script:"calDetailJson" }}

    <script>
    (function() {
        'use strict';

        // === CALENDAR MULTI-DAY SELECTION ===
        // Click a day to add it to the selection. Click again to deselect.
        // The detail panel shows combined data from ALL selected days.
        // Admin users see a total amount across all selected days.

        // Parse calendar detail data (keyed by date string, e.g. "2026-02-22")
        var calDetail = JSON.parse(document.getElementById('calDetailJson').textContent);
        var detailPanel = document.getElementById('dayDetailPanel');
        var detailTitle = document.getElementById('dayDetailTitle');
        var detailBody = document.getElementById('dayDetailBody');
        var clearBtn = document.getElementById('clearDaySelection');
        var selCountBadge = document.getElementById('daySelectionCount');
        var multiSelectHint = document.getElementById('multiSelectHint');
        var isAdmin = {{ is_admin|yesno:"true,false" }};
        var detailFooter = document.getElementById('dayDetailFooter');

        // Track which dates are currently selected (array of date strings)
        var selectedDates = [];

        // Short month names for formatting dates
        var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];

        // === Format a date string (YYYY-MM-DD) for display (e.g. "22 Feb") ===
        function formatDateShort(dateStr) {
            var parts = dateStr.split('-');
            var day = parseInt(parts[2], 10);
            var monthIdx = parseInt(parts[1], 10) - 1;
            return day + ' ' + months[monthIdx];
        }

        // === Format a date string for longer display (e.g. "22 Feb 2026") ===
        function formatDateLong(dateStr) {
            var parts = dateStr.split('-');
            var day = parseInt(parts[2], 10);
            var monthIdx = parseInt(parts[1], 10) - 1;
            return day + ' ' + months[monthIdx] + ' ' + parts[0];
        }

        // === Update the detail panel with data from all selected dates ===
        function updateDetailPanel() {
            if (selectedDates.length === 0) {
                // Nothing selected — hide the panel
                detailPanel.classList.add('d-none');
                return;
            }

            // Sort selected dates chronologically
            selectedDates.sort();

            // Collect all entries from all selected dates
            var allEntries = [];
            var totalAmount = 0;
            var uniqueWorkers = {};

            selectedDates.forEach(function(dateStr) {
                var entries = calDetail[dateStr] || [];
                entries.forEach(function(entry) {
                    // Tag each entry with its date for display
                    allEntries.push({ date: dateStr, entry: entry });
                    // Track unique workers
                    entry.workers.forEach(function(w) {
                        uniqueWorkers[w] = true;
                    });
                    // Sum amounts (admin only)
                    if (isAdmin && entry.amount !== undefined) {
                        totalAmount += entry.amount;
                    }
                });
            });

            // === Update panel title ===
            detailTitle.textContent = '';
            var icon = document.createElement('i');
            icon.className = 'fas fa-calendar-day me-2';
            detailTitle.appendChild(icon);

            if (selectedDates.length === 1) {
                // Single day: show full date
                detailTitle.appendChild(document.createTextNode(
                    formatDateLong(selectedDates[0]) + ' — ' + allEntries.length + ' log(s)'
                ));
            } else {
                // Multiple days: show date range or count
                detailTitle.appendChild(document.createTextNode(
                    selectedDates.length + ' days selected — ' + allEntries.length + ' log(s)'
                ));
            }

            // Update selection count badge
            if (selectedDates.length > 1) {
                selCountBadge.textContent = selectedDates.length + ' days';
                selCountBadge.classList.remove('d-none');
                multiSelectHint.classList.add('d-none');
            } else {
                selCountBadge.classList.add('d-none');
                multiSelectHint.classList.remove('d-none');
            }

            // === Clear previous content ===
            while (detailBody.firstChild) detailBody.removeChild(detailBody.firstChild);

            // === Build detail table ===
            var table = document.createElement('table');
            table.className = 'table table-sm table-hover mb-0';

            var thead = document.createElement('thead');
            thead.className = 'table-light';
            var headRow = document.createElement('tr');
            // Show Date column when multiple days are selected
            var headers = selectedDates.length > 1
                ? ['Date', 'Project', 'Workers', 'Supervisor', 'OT', 'Status']
                : ['Project', 'Workers', 'Supervisor', 'OT', 'Status'];
            if (isAdmin) headers.push('Amount');
            headers.forEach(function(h) {
                var th = document.createElement('th');
                th.className = (h === 'Project' || h === 'Date') ? 'ps-3' : '';
                th.textContent = h;
                headRow.appendChild(th);
            });
            thead.appendChild(headRow);
            table.appendChild(thead);

            var tbody = document.createElement('tbody');
            allEntries.forEach(function(item) {
                var entry = item.entry;
                var tr = document.createElement('tr');

                // Date column (only for multi-day selection)
                if (selectedDates.length > 1) {
                    var tdDate = document.createElement('td');
                    tdDate.className = 'ps-3';
                    tdDate.textContent = formatDateShort(item.date);
                    tr.appendChild(tdDate);
                }

                // Project
                var tdProj = document.createElement('td');
                tdProj.className = selectedDates.length === 1 ? 'ps-3' : '';
                var strong = document.createElement('strong');
                strong.textContent = entry.project;
                tdProj.appendChild(strong);
                tr.appendChild(tdProj);

                // Workers — each name gets a small pill badge for readability
                var tdWork = document.createElement('td');
                entry.workers.forEach(function(name) {
                    var pill = document.createElement('span');
                    pill.className = 'badge rounded-pill bg-light text-dark fw-normal border me-1 mb-1';
                    pill.textContent = name;
                    tdWork.appendChild(pill);
                });
                tr.appendChild(tdWork);

                // Supervisor
                var tdSup = document.createElement('td');
                tdSup.textContent = entry.supervisor;
                tr.appendChild(tdSup);

                // Overtime
                var tdOt = document.createElement('td');
                if (entry.overtime) {
                    var otBadge = document.createElement('span');
                    otBadge.className = 'badge bg-warning text-dark';
                    otBadge.textContent = entry.overtime;
                    tdOt.appendChild(otBadge);
                } else {
                    tdOt.textContent = '-';
                    tdOt.className = 'text-muted';
                }
                tr.appendChild(tdOt);

                // Status
                var tdStatus = document.createElement('td');
                var statusBadge = document.createElement('span');
                if (entry.is_paid) {
                    statusBadge.className = 'badge bg-success';
                    statusBadge.textContent = 'Paid';
                } else {
                    statusBadge.className = 'badge bg-danger bg-opacity-75';
                    statusBadge.textContent = 'Unpaid';
                }
                tdStatus.appendChild(statusBadge);
                tr.appendChild(tdStatus);

                // Amount (admin only)
                if (isAdmin) {
                    var tdAmt = document.createElement('td');
                    tdAmt.textContent = entry.amount !== undefined
                        ? 'R ' + entry.amount.toFixed(2)
                        : '-';
                    tr.appendChild(tdAmt);
                }

                tbody.appendChild(tr);
            });
            table.appendChild(tbody);
            detailBody.appendChild(table);

            // === Update totals footer (admin only) ===
            if (isAdmin && detailFooter) {
                var totalDaysEl = document.getElementById('totalDays');
                var totalLogsEl = document.getElementById('totalLogs');
                var totalWorkersEl = document.getElementById('totalWorkers');
                var totalAmountEl = document.getElementById('totalAmount');

                var uniqueCount = Object.keys(uniqueWorkers).length;

                totalDaysEl.textContent = selectedDates.length + ' day' + (selectedDates.length !== 1 ? 's' : '');
                totalLogsEl.textContent = allEntries.length + ' log' + (allEntries.length !== 1 ? 's' : '');
                totalWorkersEl.textContent = uniqueCount + ' unique worker' + (uniqueCount !== 1 ? 's' : '');
                totalAmountEl.textContent = 'R ' + totalAmount.toFixed(2);

                detailFooter.classList.remove('d-none');
            }

            // Show the panel and scroll to it
            detailPanel.classList.remove('d-none');
            detailPanel.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
        }

        // === Click handler for day cells with logs ===
        // Toggle selection: click to add, click again to remove
        document.querySelectorAll('.cal-day--has-logs').forEach(function(cell) {
            cell.addEventListener('click', function() {
                var dateStr = this.dataset.date;
                var entries = calDetail[dateStr] || [];
                if (entries.length === 0) return;

                // Toggle this date in the selection
                var idx = selectedDates.indexOf(dateStr);
                if (idx !== -1) {
                    // Already selected — remove it
                    selectedDates.splice(idx, 1);
                    this.classList.remove('cal-day--selected');
                } else {
                    // Not selected — add it
                    selectedDates.push(dateStr);
                    this.classList.add('cal-day--selected');
                }

                // Refresh the detail panel with the updated selection
                updateDetailPanel();
            });
        });

        // === Clear all selections ===
        clearBtn.addEventListener('click', function() {
            selectedDates = [];
            document.querySelectorAll('.cal-day--selected').forEach(function(c) {
                c.classList.remove('cal-day--selected');
            });
            detailPanel.classList.add('d-none');
            if (detailFooter) detailFooter.classList.add('d-none');
        });

    })();
    </script>

    {# Calendar-specific CSS #}
    <style>
        /* === CALENDAR GRID STYLES === */
        .cal-day {
            min-height: 90px;
            padding: 6px 8px;
            border: 1px solid #e2e8f0;
            border-radius: 4px;
            background: #fff;
            transition: background-color 0.15s, box-shadow 0.15s;
        }
        .cal-day__number {
            font-size: 0.85rem;
            color: var(--text-main, #334155);
        }
        /* Days from previous/next month — faded */
        .cal-day--other {
            background-color: #f8fafc;
            opacity: 0.5;
        }
        /* Today's date — accent border */
        .cal-day--today {
            border-color: var(--accent-color, #10b981);
            border-width: 2px;
        }
        .cal-day--today .cal-day__number {
            color: var(--accent-color, #10b981);
        }
        /* Days with logs — clickable */
        .cal-day--has-logs {
            cursor: pointer;
        }
        .cal-day--has-logs:hover {
            background-color: #f0fdfa;
            box-shadow: 0 2px 4px rgba(0,0,0,0.08);
        }
        /* Selected day */
        .cal-day--selected {
            background-color: #ecfdf5 !important;
            border-color: var(--accent-color, #10b981) !important;
            border-width: 2px;
            box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
        }
        /* Mini log entry indicators */
        .cal-entry {
            line-height: 1.3;
            font-size: 0.72rem;
        }
        /* Mobile: compact cells */
        @media (max-width: 767.98px) {
            .cal-day {
                min-height: 55px;
                padding: 4px 5px;
                font-size: 0.75rem;
            }
            .cal-entry {
                display: none;  /* Hide text indicators on mobile, just show badges */
            }
        }
    </style>


    {% else %}
    {# =============================================================== #}
    {# === LIST VIEW (TABLE) === #}
    {# =============================================================== #}
    <div class="card shadow-sm border-0">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th scope="col" class="ps-4">Date</th>
                            <th scope="col">Project</th>
                            <th scope="col">Workers</th>
                            <th scope="col">Overtime</th>
                            <th scope="col">Status</th>
                            {% if is_admin %}<th scope="col">Amount</th>{% endif %}
                            <th scope="col" class="pe-4">Supervisor</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for log in logs %}
                        <tr>
                            <td class="ps-4 align-middle">{{ log.date }}</td>
                            <td class="align-middle"><strong>{{ log.project.name }}</strong></td>
                            <td class="align-middle">
                                {# When filtering by a specific worker, show only that worker. Otherwise show all workers. #}
                                {% if filtered_worker_obj %}
                                    <span class="badge rounded-pill bg-light text-dark fw-normal border">{{ filtered_worker_obj.name }}</span>
                                {% else %}
                                    {% for w in log.workers.all %}
                                        <span class="badge rounded-pill bg-light text-dark fw-normal border me-1 mb-1">{{ w.name }}</span>
                                    {% endfor %}
                                    <span class="badge rounded-pill bg-secondary">{{ log.workers.count }}</span>
                                {% endif %}
                            </td>
                            <td class="align-middle">
                                {% if log.overtime_amount > 0 %}
                                <span class="badge bg-warning text-dark">{{ log.get_overtime_amount_display }}</span>
                                {% else %}
                                <span class="text-muted">-</span>
                                {% endif %}
                            </td>
                            <td class="align-middle">
                                {# Payment status — a WorkLog is "paid" if it has at least one PayrollRecord #}
                                {% if log.payroll_records.exists %}
                                <span class="badge bg-success"><i class="fas fa-check me-1"></i>Paid</span>
                                {% else %}
                                <span class="badge bg-danger bg-opacity-75"><i class="fas fa-clock me-1"></i>Unpaid</span>
                                {% endif %}
                            </td>
                            {% if is_admin %}
                            <td class="align-middle">
                                {# Daily cost — worker's rate when filtered, otherwise total for all workers #}
                                {% if filtered_worker_obj %}
                                    <span class="text-success fw-semibold">R {{ filtered_worker_obj.daily_rate }}</span>
                                {% else %}
                                    <span class="text-success fw-semibold">R {{ log.display_amount }}</span>
                                {% endif %}
                            </td>
                            {% endif %}
                            <td class="pe-4 align-middle">
                                {% if log.supervisor %}
                                    {{ log.supervisor.get_full_name|default:log.supervisor.username }}
                                {% else %}
                                    <span class="text-muted">-</span>
                                {% endif %}
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="{% if is_admin %}7{% else %}6{% endif %}" class="text-center py-5 text-muted">
                                <i class="fas fa-inbox fa-2x mb-3 d-block opacity-50"></i>
                                No work history found.
                                {% if selected_worker or selected_project or selected_status %}
                                <br><small>Try adjusting your filters.</small>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    {% endif %}

</div>
{% endblock %}