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

{% block title %}Time Logs - AI ML Operations{% endblock %}

{% block content %}
<div class="section">
    <div class="container">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
            <h1 class="section-title" style="margin-bottom: 0;">All Time Logs</h1>
            <div>
                <a href="{% url 'financial_index' %}" class="btn"
                    style="padding: 0.5rem 1.5rem; font-size: 0.9rem; margin-right: 1rem; background: var(--surface-color); color: var(--text-color); border: 1px solid rgba(255,255,255,0.1);">Back
                    to Dashboard</a>
                <a href="{% url 'Timekeeping' %}" class="btn" style="padding: 0.5rem 1.5rem; font-size: 0.9rem;">Log New
                    Time</a>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th>Employee</th>
                        <th>Charge Number</th>
                        <th>Date</th>
                        <th>Start Time</th>
                        <th>End Time</th>
                        <th>Duration (hrs)</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for log in logs %}
                    <tr>
                        <td>{{ log.timeCard.employee }}</td>
                        <td>{{ log.charge_number }}</td>
                        <td>{{ log.date }}</td>
                        <td>{{ log.start_time|default_if_none:"" }}</td>
                        <td>{{ log.end_time|default_if_none:"" }}</td>
                        <td>{{ log.hour }}</td>
                        <td>
                            <a href="{% url 'edit_time_log' log.id %}" class="text-cyber-cyan"
                                style="margin-right: 10px;">Edit</a>
                            <form action="{% url 'delete_time_log' log.id %}" method="POST" style="display:inline;"
                                onsubmit="return confirm('Are you sure you want to delete this time log?');">
                                {% csrf_token %}
                                <button type="submit"
                                    style="background:none; border:none; color: #ff4444; cursor:pointer; font-size: 0.95rem; font-family: var(--font-main);">Delete</button>
                            </form>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="7" style="color: var(--text-muted); text-align: center; padding: 2rem;">No time
                            logs found.</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}