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

{% block title %}{% trans "Attendance Details" %} - {{ block.super }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0">
            <i class="fa fa-clock me-2"></i>{% trans "Attendance Details" %}
        </h1>
        <div class="btn-group">
            <a href="{% url 'hr:attendance-list' %}" class="btn btn-secondary">
                <i class="fa fa-arrow-left me-1"></i>{% trans "Back to List" %}
            </a>
            <a href="{% url 'hr:attendance-update' attendance.pk %}" class="btn btn-warning">
                <i class="fa fa-edit me-1"></i>{% trans "Edit" %}
            </a>
        </div>
    </div>



    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">{% trans "Attendance Information" %}</h5>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <strong>{% trans "Employee" %}:</strong><br>
                            {{ attendance.employee.get_full_name }}
                        </div>
                        <div class="col-md-6">
                            <strong>{% trans "Date" %}:</strong><br>
                            {{ attendance.date|date:"l, F d, Y" }}
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-4">
                            <strong>{% trans "Check In" %}:</strong><br>
                            {{ attendance.check_in|time:"H:i"|default:"—" }}
                        </div>
                        <div class="col-md-4">
                            <strong>{% trans "Check Out" %}:</strong><br>
                            {{ attendance.check_out|time:"H:i"|default:"—" }}
                        </div>
                        <div class="col-md-4">
                            <strong>{% trans "Hours Worked" %}:</strong><br>
                            {{ attendance.hours_worked|default:"—" }}
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <strong>{% trans "Status" %}:</strong><br>
                            {% if attendance.status == 'PRESENT' %}
                            <span class="badge bg-success">{{ attendance.get_status_display }}</span>
                            {% elif attendance.status == 'LATE' %}
                            <span class="badge bg-warning">{{ attendance.get_status_display }}</span>
                            {% elif attendance.status == 'ABSENT' %}
                            <span class="badge bg-danger">{{ attendance.get_status_display }}</span>
                            {% else %}
                            <span class="badge bg-secondary">{{ attendance.get_status_display }}</span>
                            {% endif %}
                        </div>
                    </div>
                    {% if attendance.notes %}
                    <div class="row">
                        <div class="col-12">
                            <strong>{% trans "Notes" %}:</strong><br>
                            <p class="text-muted">{{ attendance.notes }}</p>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">{% trans "Metadata" %}</h5>
                </div>
                <div class="card-body">
                    <p><strong>{% trans "ID" %}:</strong><br><small>{{ attendance.id }}</small></p>
                    <p><strong>{% trans "Created" %}:</strong><br>{{ attendance.created_at|date:"Y-m-d H:i" }}</p>
                    <p><strong>{% trans "Updated" %}:</strong><br>{{ attendance.updated_at|date:"Y-m-d H:i" }}</p>
                    <p><strong>{% trans "Tenant" %}:</strong><br>{{ attendance.tenant.name }}</p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}