{% from "components/ui.html" import empty_state_compact %}
<div id="timeEntriesListContainer">
    <div class="p-4 border-b border-border-light dark:border-border-dark flex justify-between items-center">
        <div class="flex items-center gap-4">
            <label class="flex items-center gap-2 cursor-pointer">
                <input type="checkbox" id="selectAll" class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary" onchange="toggleSelectAll()">
                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ _('Select All') }}</span>
            </label>
            <span id="selectedCount" class="text-sm text-gray-600 dark:text-gray-400 hidden">
                <span id="countValue">0</span> {{ _('selected') }}
            </span>
        </div>
        <div class="flex items-center gap-2">
            <div class="relative">
                <button type="button" id="bulkActionsBtn" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed" onclick="openBulkActionsMenu()" disabled>
                    <i class="fas fa-tasks mr-2"></i>{{ _('Bulk Actions') }}
                </button>
                <ul id="bulkActionsMenu" class="hidden absolute right-0 mt-2 w-56 bg-card-light dark:bg-card-dark border border-border-light dark:border-border-dark rounded-md shadow-lg z-50">
                    <li><a class="block px-4 py-2 text-sm text-text-light dark:text-text-dark hover:bg-gray-100 dark:hover:bg-gray-700" href="#" onclick="return showBulkPaidDialog()"><i class="fas fa-check-circle mr-2"></i>{{ _('Mark Paid/Unpaid') }}</a></li>
                    <li><hr class="my-1 border-border-light dark:border-border-dark"></li>
                    <li><a class="block px-4 py-2 text-sm text-rose-600 hover:bg-gray-100 dark:hover:bg-gray-700" href="#" onclick="return showBulkDeleteConfirm()"><i class="fas fa-trash mr-2"></i>{{ _('Delete') }}</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-border-light dark:divide-border-dark enhanced-table responsive-cards">
            <thead class="bg-background-light dark:bg-background-dark">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-12">
                        <input type="checkbox" id="selectAllHeader" class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary" onchange="toggleSelectAll()">
                    </th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">{{ _('Date') }}</th>
                    {% if can_view_all %}
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">{{ _('User') }}</th>
                    {% endif %}
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">{{ _('Project/Client') }}</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">{{ _('Task') }}</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">{{ _('Duration') }}</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">{{ _('Notes') }}</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">{{ _('Tags') }}</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">{{ _('Invoice Ref') }}</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">{{ _('Status') }}</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">{{ _('Actions') }}</th>
                </tr>
            </thead>
            <tbody class="bg-card-light dark:bg-card-dark divide-y divide-border-light dark:divide-border-dark">
                {% if time_entries %}
                    {% for entry in time_entries %}
                    {% set can_edit_entry = current_user.is_admin or (entry.user_id == current_user.id) %}
                    {% set can_row_schedule = current_user.is_admin or (entry.user_id == current_user.id and current_user.has_permission('edit_own_time_entries')) %}
                    <tr class="hover:bg-background-light dark:hover:bg-background-dark transition-colors" data-entry-id="{{ entry.id }}" data-entry-active="{{ '1' if entry.is_active else '0' }}">
                        <td class="px-4 py-3 whitespace-nowrap bulk-checkbox-cell">
                            <input type="checkbox" name="entry_ids[]" value="{{ entry.id }}" class="entry-checkbox h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary" onchange="updateBulkActions()">
                        </td>
                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100" data-label="{{ _('Date') }}">
                            <a href="{{ url_for('timer.view_timer', timer_id=entry.id) }}" class="text-primary hover:underline">
                                {{ entry.start_time|user_datetime if entry.start_time else '-' }}
                            </a>
                        </td>
                        {% if can_view_all %}
                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100" data-label="{{ _('User') }}">
                            {{ entry.user.display_name if entry.user else '-' }}
                        </td>
                        {% endif %}
                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100" data-label="{{ _('Project/Client') }}">
                            {% if entry.project %}
                                <a href="{{ url_for('projects.view_project', project_id=entry.project.id) }}" class="text-primary hover:underline">
                                    {{ entry.project.name }}
                                </a>
                            {% elif entry.client %}
                                <a href="{{ url_for('clients.view_client', client_id=entry.client.id) }}" class="text-primary hover:underline">
                                    {{ entry.client.name }}
                                </a>
                            {% else %}
                                -
                            {% endif %}
                        </td>
                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100" data-label="{{ _('Task') }}">
                            {% if entry.task %}
                                <a href="{{ url_for('tasks.view_task', task_id=entry.task.id) }}" class="text-primary hover:underline">
                                    {{ entry.task.name }}
                                </a>
                            {% else %}
                                -
                            {% endif %}
                        </td>
                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100" data-label="{{ _('Duration') }}"
                            data-duration-cell
                            data-duration-formatted="{{ entry.duration_formatted }}"
                            data-duration-seconds="{{ entry.duration_seconds or 0 }}"
                            data-break-seconds="{{ entry.break_seconds or 0 }}"
                            data-start-local="{{ entry.start_time.strftime('%Y-%m-%dT%H:%M') if entry.start_time else '' }}"
                            data-end-local="{{ entry.end_time.strftime('%Y-%m-%dT%H:%M') if entry.end_time else '' }}"
                            data-can-edit-duration="{{ '1' if (can_edit_entry and can_row_schedule and not entry.is_active and entry.end_time) else '0' }}">
                            {% if can_edit_entry and can_row_schedule and not entry.is_active and entry.end_time %}
                            <button type="button" class="time-entry-inline-target inline-flex max-w-full cursor-pointer rounded border border-transparent px-1 py-0.5 text-left hover:border-border-light hover:bg-background-light dark:hover:border-border-dark dark:hover:bg-background-dark" data-inline-field="duration" tabindex="0" title="{{ _('Click to edit') }}">
                                <span class="time-entry-inline-display">{{ entry.duration_formatted }}</span>
                            </button>
                            {% elif entry.is_active %}
                            <span class="text-text-muted-light dark:text-text-muted-dark" title="{{ _('Stop the timer to edit duration') }}">{{ entry.duration_formatted }}</span>
                            {% else %}
                            <span>{{ entry.duration_formatted }}</span>
                            {% endif %}
                        </td>
                        <td class="px-4 py-3 text-sm text-gray-900 dark:text-gray-100 max-w-xs" data-label="{{ _('Notes') }}" data-notes-cell data-notes-raw={{ (entry.notes or '')|tojson }}>
                            {% if can_edit_entry %}
                            <button type="button" class="time-entry-inline-target inline-flex max-w-full cursor-pointer rounded border border-transparent px-1 py-0.5 text-left hover:border-border-light hover:bg-background-light dark:hover:border-border-dark dark:hover:bg-background-dark" data-inline-field="notes" tabindex="0" title="{{ _('Click to edit') }}">
                                <span class="time-entry-inline-display block max-w-xs truncate">{% if entry.notes %}{{ entry.notes|striptags|truncate(60) }}{% else %}-{% endif %}</span>
                            </button>
                            {% else %}
                                {% if entry.notes %}
                                <div class="truncate" title="{{ entry.notes|striptags }}">
                                    {{ entry.notes|striptags|truncate(60) }}
                                </div>
                                {% else %}
                                -
                                {% endif %}
                            {% endif %}
                        </td>
                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100" data-label="{{ _('Tags') }}">
                            {% if entry.tags %}
                                {% for tag in entry.tag_list %}
                                    <span class="inline-block bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 px-2 py-1 rounded text-xs mr-1 mb-1">{{ tag }}</span>
                                {% endfor %}
                            {% else %}
                                -
                            {% endif %}
                        </td>
                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100" data-label="{{ _('Invoice Ref') }}">
                            {% if entry.invoice_number %}
                                {% set link_template = link_templates_by_field.get('invoice_number') if link_templates_by_field else None %}
                                {% if link_template %}
                                    {% set rendered_url = link_template.render_url(entry.invoice_number) %}
                                    {% if rendered_url %}
                                        <a href="{{ rendered_url }}" target="_blank" rel="noopener noreferrer" class="text-primary hover:underline break-all">
                                            {{ entry.invoice_number }}
                                            <i class="fas fa-external-link-alt ml-1 text-xs"></i>
                                        </a>
                                    {% else %}
                                        {{ entry.invoice_number }}
                                    {% endif %}
                                {% elif entry.invoice_number is string and (entry.invoice_number.startswith('http://') or entry.invoice_number.startswith('https://')) %}
                                    <a href="{{ entry.invoice_number }}" target="_blank" rel="noopener noreferrer" class="text-primary hover:underline break-all">
                                        {{ entry.invoice_number }}
                                        <i class="fas fa-external-link-alt ml-1 text-xs"></i>
                                    </a>
                                {% elif entry.invoice_number is string and entry.invoice_number.startswith('www.') %}
                                    <a href="https://{{ entry.invoice_number }}" target="_blank" rel="noopener noreferrer" class="text-primary hover:underline break-all">
                                        {{ entry.invoice_number }}
                                        <i class="fas fa-external-link-alt ml-1 text-xs"></i>
                                    </a>
                                {% else %}
                                    {{ entry.invoice_number }}
                                {% endif %}
                            {% else %}
                                -
                            {% endif %}
                        </td>
                        <td class="px-4 py-3 whitespace-nowrap" data-label="{{ _('Status') }}">
                            {% if entry.paid %}
                                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
                                    <i class="fas fa-check-circle mr-1"></i>{{ _('Paid') }}
                                </span>
                            {% else %}
                                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200">
                                    <i class="fas fa-clock mr-1"></i>{{ _('Unpaid') }}
                                </span>
                            {% endif %}
                            {% if entry.billable %}
                                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 ml-1">
                                    <i class="fas fa-dollar-sign mr-1"></i>{{ _('Billable') }}
                                </span>
                            {% endif %}
                        </td>
                        <td class="px-4 py-3 whitespace-nowrap text-sm mobile-actions" data-label="{{ _('Actions') }}">
                            <div class="flex items-center gap-2">
                                <a href="{{ url_for('timer.view_timer', timer_id=entry.id) }}" class="text-primary hover:text-primary/80" title="{{ _('View') }}">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <a href="{{ url_for('timer.edit_timer', timer_id=entry.id) }}" class="text-primary hover:text-primary/80" title="{{ _('Edit') }}">
                                    <i class="fas fa-edit"></i>
                                </a>
                                {% if (time_approvals_enabled|default(false)) and entry.end_time and entry.user_id == current_user.id and entry.id not in (entry_ids_with_pending_approval|default([])) %}
                                <form method="POST" action="{{ url_for('time_approvals.request_approval', entry_id=entry.id) }}" class="inline" title="{{ _('Request approval') }}">
                                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                    <button type="submit" class="text-primary hover:text-primary/80 bg-transparent border-none cursor-pointer p-0" title="{{ _('Request approval') }}">
                                        <i class="fas fa-check-double"></i>
                                    </button>
                                </form>
                                {% endif %}
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                {% else %}
                    {% set has_filters = (filters.start_date or filters.end_date or filters.project_id or filters.client_id or filters.paid or filters.billable or (filters.search and filters.search|trim) or (filters.user_id if can_view_all else none) or (filters.client_custom_field and filters.client_custom_field|length > 0)) %}
                    {% if has_filters %}
                        {% set clear_filters_url = url_for('timer.time_entries_overview') %}
                        {% set empty_actions = '<a href="' ~ clear_filters_url ~ '" class="btn btn-secondary btn-sm"><i class="fas fa-times mr-1" aria-hidden="true"></i>' ~ _('Clear filters') ~ '</a><a href="' ~ url_for('timer.manual_entry') ~ '" class="btn btn-primary btn-sm"><i class="fas fa-play mr-1" aria-hidden="true"></i>' ~ _('Log Time') ~ '</a>' %}
                        <tr>
                            <td colspan="{% if can_view_all %}11{% else %}10{% endif %}" class="px-4 py-12">
                                {{ empty_state_compact('fas fa-search', _('No time entries match your filters'), _('Try adjusting your filters or clear them to see all entries. You can also log a new time entry.'), empty_actions, type='no-results') }}
                            </td>
                        </tr>
                    {% else %}
                        {% set log_time_actions = '<a href="' ~ url_for('timer.manual_entry') ~ '" class="btn btn-primary btn-sm"><i class="fas fa-play mr-1" aria-hidden="true"></i>' ~ _('Log Time') ~ '</a>' %}
                        <tr>
                            <td colspan="{% if can_view_all %}11{% else %}10{% endif %}" class="px-4 py-12">
                                {{ empty_state_compact('fas fa-clock', _('No time entries yet'), _('Log time to see your entries here. Use the timer on the dashboard or log time manually.'), log_time_actions, type='no-data') }}
                            </td>
                        </tr>
                    {% endif %}
                {% endif %}
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    {% if pagination.pages > 1 %}
    <nav class="px-4 py-3 border-t border-border-light dark:border-border-dark flex items-center justify-between" aria-label="{{ _('Time entries pagination') }}">
        <div class="text-sm text-gray-700 dark:text-gray-300">
            {{ _('Showing %(start)s to %(end)s of %(total)s entries', start=pagination.page * pagination.per_page - pagination.per_page + 1, end=pagination.page * pagination.per_page if pagination.page * pagination.per_page < pagination.total else pagination.total, total=pagination.total) }}
        </div>
        <div class="flex gap-2">
            {% if pagination.has_prev %}
                <a href="{{ url_for('timer.time_entries_overview', page=pagination.prev_num, **url_filters) }}" class="px-3 py-1 bg-background-light dark:bg-background-dark rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
                    {{ _('Previous') }}
                </a>
            {% endif %}
            {% for page_num in pagination.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=2) %}
                {% if page_num %}
                    {% if page_num == pagination.page %}
                        <span class="px-3 py-1 bg-primary text-white rounded-lg">{{ page_num }}</span>
                    {% else %}
                        <a href="{{ url_for('timer.time_entries_overview', page=page_num, **url_filters) }}" class="px-3 py-1 bg-background-light dark:bg-background-dark rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
                            {{ page_num }}
                        </a>
                    {% endif %}
                {% else %}
                    <span class="px-3 py-1">...</span>
                {% endif %}
            {% endfor %}
            {% if pagination.has_next %}
                <a href="{{ url_for('timer.time_entries_overview', page=pagination.next_num, **url_filters) }}" class="px-3 py-1 bg-background-light dark:bg-background-dark rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
                    {{ _('Next') }}
                </a>
            {% endif %}
        </div>
    </nav>
    {% endif %}
</div>