{% extends "base.html" %}

{% block title %}{{ detailview.table.name.title() }} Details - 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">
                <a href="../">
                    <i class="bi bi-arrow-left me-1"></i>{{ detailview.table.name.title() }}
                </a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">View</li>
        </ol>
    </div>
</nav>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-12 col-lg-8">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">
                            <i class="bi bi-eye me-2"></i>
                            {{ detailview.table.name.title() }} Details
                        </h5>
                        <div class="btn-group btn-group-sm">
                            <a href="edit" class="btn btn-outline-primary">
                                <i class="bi bi-pencil"></i> Edit
                            </a>
                            <button type="button" 
                                    class="btn btn-outline-danger" 
                                    data-confirm="Are you sure you want to delete this {{ detailview.table.name }}?"
                                    data-confirm-details="This action cannot be undone. The record will be permanently removed from the database."
                                    data-confirm-text="Delete Record"
                                    onclick="document.getElementById('deleteForm').submit();">
                                <i class="bi bi-trash"></i> Delete
                            </button>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    {% for field in detailview.get_display_fields() %}
                    {% set value = detailview.format_field_value(field) %}
                    <div class="row mb-3">
                        <div class="col-sm-4">
                            <strong>{{ field.name.replace('_', ' ').title() }}</strong>
                        </div>
                        <div class="col-sm-8">
                            {% if value and field.type != 'boolean' %}
                                {{ value }}
                            {% elif field.type == 'boolean' %}
                                {{ value }}
                            {% else %}
                                <span class="text-muted">Not set</span>
                            {% endif %}
                        </div>
                    </div>
                    {% endfor %}
                    
                    <!-- System fields (only show if not already explicitly defined) -->
                    {% set explicit_field_names = detailview.get_display_fields() | map(attribute='name') | list %}
                    
                    {% if detailview.record.created_at and 'created_at' not in explicit_field_names %}
                    <div class="row mb-3">
                        <div class="col-sm-4">
                            <strong>Created</strong>
                        </div>
                        <div class="col-sm-8">
                            <small class="text-muted">
                                {{ detailview.record.created_at.strftime('%B %d, %Y at %I:%M %p') }}
                            </small>
                        </div>
                    </div>
                    {% endif %}
                    
                    {% if detailview.record.updated_at and 'updated_at' not in explicit_field_names %}
                    <div class="row mb-3">
                        <div class="col-sm-4">
                            <strong>Last Updated</strong>
                        </div>
                        <div class="col-sm-8">
                            <small class="text-muted">
                                {{ detailview.record.updated_at.strftime('%B %d, %Y at %I:%M %p') }}
                            </small>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    
    <!-- Hidden delete form -->
    <form id="deleteForm" method="POST" action="delete" style="display: none;">
        <input type="hidden" name="_method" value="DELETE">
    </form>
</div>

<style>
/* Mobile optimizations */
@media (max-width: 576px) {
    .row.mb-3 {
        margin-bottom: 1rem !important;
    }
    
    .col-sm-4 {
        margin-bottom: 0.25rem;
    }
    
    .btn-group-sm .btn {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
    }
}

/* Card spacing */
.card-body .row:last-child {
    margin-bottom: 0;
}
</style>
{% endblock %}