{% extends "base.html" %}

{% block title %}{{ title }}{% endblock %}

{% block content %}
<div class="container-fluid mt-4">
    <h2>{{ title }}</h2>

    <!-- Record Navigation Bar (only in edit mode with filters) -->
    {% if edit_mode and (prev_id or next_id or total_records > 0) %}
    <div class="alert alert-info d-flex justify-content-between align-items-center mb-3">
        <div>
            <i class="fas fa-info-circle"></i>
            {% if total_records > 0 %}
                {{ _('Record') }} <strong>{{ current_position }}</strong> {{ _('of') }} <strong>{{ total_records }}</strong>
            {% else %}
                {{ _('Viewing record') }}
            {% endif %}
        </div>
        <div class="btn-group" role="group">
            {% if prev_id %}
            <a href="{{ url_for('edit_us', us_id=prev_id) }}" class="btn btn-sm btn-outline-primary">
                <i class="fas fa-chevron-left"></i> {{ _('Previous') }}
            </a>
            {% else %}
            <button class="btn btn-sm btn-outline-secondary" disabled>
                <i class="fas fa-chevron-left"></i> {{ _('Previous') }}
            </button>
            {% endif %}

            <a href="{{ url_for('us_list') }}" class="btn btn-sm btn-outline-secondary">
                <i class="fas fa-list"></i> {{ _('Back to List') }}
            </a>

            {% if next_id %}
            <a href="{{ url_for('edit_us', us_id=next_id) }}" class="btn btn-sm btn-outline-primary">
                {{ _('Next') }} <i class="fas fa-chevron-right"></i>
            </a>
            {% else %}
            <button class="btn btn-sm btn-outline-secondary" disabled>
                {{ _('Next') }} <i class="fas fa-chevron-right"></i>
            </button>
            {% endif %}
        </div>
    </div>
    {% endif %}

    <form method="POST" class="mt-4">
        {{ form.hidden_tag() }}

        {% if form.errors %}
        <div class="alert alert-danger">
            <strong>{{ _('Form errors:') }}</strong>
            <ul>
            {% for field_name, errors in form.errors.items() %}
                {% for error in errors %}
                <li>{{ field_name }}: {{ error }}</li>
                {% endfor %}
            {% endfor %}
            </ul>
        </div>
        {% endif %}

        <!-- Bootstrap Tabs -->
        <ul class="nav nav-tabs" id="usFormTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="basic-tab" data-bs-toggle="tab" data-bs-target="#basic" type="button" role="tab" aria-controls="basic" aria-selected="true">
                    <i class="fas fa-info-circle"></i> {{ _('Basic Information') }}
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="description-tab" data-bs-toggle="tab" data-bs-target="#description" type="button" role="tab" aria-controls="description" aria-selected="false">
                    <i class="fas fa-align-left"></i> {{ _('Descriptions') }}
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="physical-tab" data-bs-toggle="tab" data-bs-target="#physical" type="button" role="tab" aria-controls="physical" aria-selected="false">
                    <i class="fas fa-ruler"></i> {{ _('Physical Characteristics') }}
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="chronology-tab" data-bs-toggle="tab" data-bs-target="#chronology" type="button" role="tab" aria-controls="chronology" aria-selected="false">
                    <i class="fas fa-calendar-alt"></i> {{ _('Chronology') }}
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="relationships-tab" data-bs-toggle="tab" data-bs-target="#relationships" type="button" role="tab" aria-controls="relationships" aria-selected="false">
                    <i class="fas fa-project-diagram"></i> {{ _('Stratigraphic Relationships') }}
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="documentation-tab" data-bs-toggle="tab" data-bs-target="#documentation" type="button" role="tab" aria-controls="documentation" aria-selected="false">
                    <i class="fas fa-file-alt"></i> {{ _('Documentation') }}
                </button>
            </li>
            {% if edit_mode and us_id %}
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="media-tab" data-bs-toggle="tab" data-bs-target="#media" type="button" role="tab" aria-controls="media" aria-selected="false">
                    <i class="fas fa-photo-video"></i> {{ _('Media Files') }}
                </button>
            </li>
            {% endif %}
        </ul>

        <div class="tab-content border border-top-0 p-4" id="usFormTabContent">
            <!-- TAB 1: Informazioni Base -->
            <div class="tab-pane fade show active" id="basic" role="tabpanel" aria-labelledby="basic-tab">
                <!-- Identificazione -->
                <div class="card mb-4">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">{{ _('Identification') }}</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold">{{ _('Site') }} *</label>
                                {{ form.sito(class="form-select", required=True) }}
                                {% if form.sito.errors %}
                                    <div class="text-danger">{{ form.sito.errors[0] }}</div>
                                {% endif %}
                            </div>
                            <div class="col-md-3 mb-3">
                                <label class="form-label">{{ _('Area') }}</label>
                                {{ form.area(class="form-control") }}
                            </div>
                            <div class="col-md-3 mb-3">
                                <label class="form-label fw-bold">{{ _('SU Number') }} *</label>
                                {{ form.us(class="form-control", required=True) }}
                                {% if form.us.errors %}
                                    <div class="text-danger">{{ form.us.errors[0] }}</div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-3 mb-3">
                                <label class="form-label">{{ _('Unit Type') }}</label>
                                {{ form.unita_tipo(class="form-select", id="unita_tipo") }}
                            </div>
                            <div class="col-md-3 mb-3" id="tipo_documento_field" style="display:none;">
                                <label class="form-label">{{ _('Document Type') }}</label>
                                {{ form.tipo_documento(class="form-select") }}
                            </div>
                            <div class="col-md-6 mb-3" id="documento_file_field" style="display:none;">
                                <label class="form-label">{{ _('Upload Document File') }}</label>
                                {{ form.documento_file(class="form-control") }}
                                <small class="text-muted">{{ _('File will be saved in DoSC folder') }}</small>
                            </div>
                            <div class="col-md-3 mb-3">
                                <label class="form-label">{{ _('Sector') }}</label>
                                {{ form.settore(class="form-control") }}
                            </div>
                            <div class="col-md-3 mb-3">
                                <label class="form-label">{{ _('Room') }}</label>
                                {{ form.ambient(class="form-control") }}
                            </div>
                            <div class="col-md-3 mb-3">
                                <label class="form-label">{{ _('Trench') }}</label>
                                {{ form.saggio(class="form-control") }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label class="form-label">{{ _('Square/Partition') }}</label>
                                {{ form.quad_par(class="form-control") }}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Dati di Scavo -->
                <div class="card mb-4">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">{{ _('Excavation Data') }}</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3 mb-3">
                                <label class="form-label">{{ _('Excavation Year') }}</label>
                                {{ form.anno_scavo(class="form-control", placeholder="YYYY") }}
                            </div>
                            <div class="col-md-3 mb-3">
                                <label class="form-label">{{ _('Excavated') }}</label>
                                {{ form.scavato(class="form-select") }}
                            </div>
                            <div class="col-md-3 mb-3">
                                <label class="form-label">{{ _('Excavation Method') }}</label>
                                {{ form.metodo_di_scavo(class="form-select") }}
                            </div>
                            <div class="col-md-3 mb-3">
                                <label class="form-label">{{ _('Recording Date') }}</label>
                                {{ form.data_schedatura(class="form-control", placeholder="YYYY-MM-DD") }}
                                <small class="text-muted">{{ _('Format: YYYY-MM-DD') }}</small>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label class="form-label">{{ _('Recorder') }}</label>
                                {{ form.schedatore(class="form-control") }}
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label">{{ _('SU Director') }}</label>
                                {{ form.direttore_us(class="form-control") }}
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label">{{ _('SU Supervisor') }}</label>
                                {{ form.responsabile_us(class="form-control") }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label class="form-label">{{ _('Activity') }}</label>
                                {{ form.attivita(class="form-control") }}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Catalogazione ICCD -->
                <div class="card mb-4">
                    <div class="card-header bg-secondary text-white">
                        <h5 class="mb-0">{{ _('ICCD Cataloguing') }}</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label class="form-label">{{ _('General Catalogue No.') }}</label>
                                {{ form.n_catalogo_generale(class="form-control") }}
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label">{{ _('Internal Catalogue No.') }}</label>
                                {{ form.n_catalogo_interno(class="form-control") }}
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label">{{ _('International Catalogue No.') }}</label>
                                {{ form.n_catalogo_internazionale(class="form-control") }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label class="form-label">{{ _('Superintendence') }}</label>
                                {{ form.soprintendenza(class="form-control") }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- TAB 2: Descrizioni -->
            <div class="tab-pane fade" id="description" role="tabpanel" aria-labelledby="description-tab">
                <div class="mb-3">
                    <label class="form-label fw-bold">{{ _('Stratigraphic Description') }}</label>
                    {{ form.d_stratigrafica(class="form-control", rows=4) }}
                </div>

                <div class="mb-3">
                    <label class="form-label fw-bold">{{ _('Interpretative Description') }}</label>
                    {{ form.d_interpretativa(class="form-control", rows=4) }}
                </div>

                <div class="mb-3">
                    <label class="form-label">{{ _('Detailed Description') }}</label>
                    {{ form.descrizione(class="form-control", rows=6) }}
                </div>

                <div class="mb-3">
                    <label class="form-label">{{ _('Interpretation') }}</label>
                    {{ form.interpretazione(class="form-control", rows=6) }}
                </div>

                <div class="mb-3">
                    <label class="form-label">{{ _('Observations') }}</label>
                    {{ form.osservazioni(class="form-control", rows=4) }}
                </div>
            </div>

            <!-- TAB 3: Caratteristiche Fisiche -->
            <div class="tab-pane fade" id="physical" role="tabpanel" aria-labelledby="physical-tab">
                <!-- Caratteristiche -->
                <div class="card mb-4">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">{{ _('Characteristics') }}</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3 mb-3">
                                <label class="form-label">Definizione Stratigrafica</label>
                                {{ form.definizione_stratigrafica(class="form-select") }}
                            </div>
                            <div class="col-md-3 mb-3">
                                <label class="form-label">{{ _('Formation') }}</label>
                                {{ form.formazione(class="form-select") }}
                            </div>
                            <div class="col-md-3 mb-3">
                                <label class="form-label">{{ _('Conservation State') }}</label>
                                {{ form.stato_di_conservazione(class="form-select") }}
                            </div>
                            <div class="col-md-3 mb-3">
                                <label class="form-label">{{ _('Color') }}</label>
                                {{ form.colore(class="form-select") }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-3 mb-3">
                                <label class="form-label">{{ _('Consistency') }}</label>
                                {{ form.consistenza(class="form-select") }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label class="form-label">{{ _('Structure') }}</label>
                                {{ form.struttura(class="form-control") }}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Misure -->
                <div class="card mb-4">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">{{ _('Measurements') }}</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{{ _('Relative Elevation') }}</label>
                                {{ form.quota_relativa(class="form-control", placeholder=_('e.g. 10.50')) }}
                                <small class="text-muted">{{ _('Meters') }}</small>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{{ _('Absolute Elevation') }}</label>
                                {{ form.quota_abs(class="form-control", placeholder=_('e.g. 120.50')) }}
                                <small class="text-muted">{{ _('Meters a.s.l.') }}</small>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label class="form-label">{{ _('Max Length') }}</label>
                                {{ form.lunghezza_max(class="form-control", placeholder=_('e.g. 250')) }}
                                <small class="text-muted">{{ _('cm') }}</small>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label">{{ _('Average Width') }}</label>
                                {{ form.larghezza_media(class="form-control", placeholder=_('e.g. 150')) }}
                                <small class="text-muted">{{ _('cm') }}</small>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label">{{ _('Max Height') }}</label>
                                {{ form.altezza_max(class="form-control", placeholder=_('e.g. 50')) }}
                                <small class="text-muted">{{ _('cm') }}</small>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label class="form-label">{{ _('Min Height') }}</label>
                                {{ form.altezza_min(class="form-control", placeholder=_('e.g. 10')) }}
                                <small class="text-muted">{{ _('cm') }}</small>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label">{{ _('Max Depth') }}</label>
                                {{ form.profondita_max(class="form-control", placeholder=_('e.g. 80')) }}
                                <small class="text-muted">{{ _('cm') }}</small>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label">{{ _('Min Depth') }}</label>
                                {{ form.profondita_min(class="form-control", placeholder=_('e.g. 20')) }}
                                <small class="text-muted">{{ _('cm') }}</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- TAB 4: Cronologia -->
            <div class="tab-pane fade" id="chronology" role="tabpanel" aria-labelledby="chronology-tab">
                <div class="card mb-4">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">{{ _('Periodization') }}</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold">{{ _('Initial Period') }}</label>
                                {{ form.periodo_iniziale(class="form-control") }}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{{ _('Initial Phase') }}</label>
                                {{ form.fase_iniziale(class="form-control") }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold">{{ _('Final Period') }}</label>
                                {{ form.periodo_finale(class="form-control") }}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{{ _('Final Phase') }}</label>
                                {{ form.fase_finale(class="form-control") }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{{ _('Dating') }}</label>
                                {{ form.datazione(class="form-select") }}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{{ _('Reliability') }}</label>
                                {{ form.affidabilita(class="form-select") }}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="alert alert-info">
                    <i class="fas fa-info-circle"></i>
                    <strong>{{ _('Tip:') }}</strong> {{ _('Specifying the initial and final period helps to chronologically contextualize the stratigraphic unit in the archaeological site.') }}
                </div>
            </div>

            <!-- TAB 5: Relazioni Stratigrafiche -->
            <div class="tab-pane fade" id="relationships" role="tabpanel" aria-labelledby="relationships-tab">
                <div class="alert alert-info mb-4">
                    <i class="fas fa-info-circle"></i>
                    <strong>{{ _('Stratigraphic relationships format:') }}</strong><br>
                    {{ _('Enter relationships in the format:') }} <code>{{ _('covers 1002, cuts 1005, leans on 1010') }}</code><br>
                    {{ _('Relationship types: covers, cuts, leans on, fills, equal to, bonds to') }}
                </div>

                <div class="mb-3">
                    <label class="form-label fw-bold">{{ _('Stratigraphic Relationships') }}</label>
                    {{ form.rapporti(class="form-control", rows=8) }}
                    <small class="form-text text-muted">
                        {{ _('Example: "Covers 1002, Covers 1003, Cuts 1005, Leans on 1010"') }}
                    </small>
                </div>

                <div class="card">
                    <div class="card-header bg-secondary text-white">
                        <h5 class="mb-0">{{ _('Harris Matrix Relationships') }}</h5>
                    </div>
                    <div class="card-body">
                        <p class="mb-2">
                            <i class="fas fa-lightbulb text-warning"></i>
                            {{ _('After saving the SU, it will be possible to view the complete Harris Matrix of the site in the dedicated section.') }}
                        </p>
                        <p class="mb-0">
                            <i class="fas fa-check-circle text-success"></i>
                            {{ _('The system will automatically validate stratigraphic relationships to identify any paradoxes or cycles.') }}
                        </p>
                    </div>
                </div>
            </div>

            <!-- TAB 6: Documentazione -->
            <div class="tab-pane fade" id="documentation" role="tabpanel" aria-labelledby="documentation-tab">
                <div class="mb-3">
                    <label class="form-label fw-bold">{{ _('Inclusions') }}</label>
                    {{ form.inclusi(class="form-control", rows=4) }}
                    <small class="text-muted">{{ _('Materials or elements included in the SU') }}</small>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-bold">{{ _('Samples') }}</label>
                    {{ form.campioni(class="form-control", rows=4) }}
                    <small class="text-muted">{{ _('Samples taken from the SU') }}</small>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">{{ _('Flotation') }}</label>
                        {{ form.flottazione(class="form-select") }}
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label">{{ _('Sieving') }}</label>
                        {{ form.setacciatura(class="form-select") }}
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label">{{ _('Documentation') }}</label>
                    {{ form.documentazione(class="form-control", rows=4) }}
                    <small class="text-muted">{{ _('References to photographic, graphic documentation, etc.') }}</small>
                </div>

                <div class="mb-3">
                    <label class="form-label">{{ _('Containers/Contents') }}</label>
                    {{ form.cont_per(class="form-control", rows=4) }}
                    <small class="text-muted">{{ _('Containment relationships (e.g. "Container: SU 1000")') }}</small>
                </div>
            </div>

            <!-- TAB 7: Media Files (only in edit mode) -->
            {% if edit_mode and us_id %}
            <div class="tab-pane fade" id="media" role="tabpanel" aria-labelledby="media-tab">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5 class="mb-0">
                        <i class="fas fa-photo-video"></i> {{ _('Media Files') }}
                    </h5>
                    <a href="{{ url_for('upload_media') }}?entity_type=us&entity_id={{ us_id }}"
                       class="btn btn-primary">
                        <i class="fas fa-upload"></i> {{ _('Upload Media') }}
                    </a>
                </div>

                <!-- Drag and Drop Upload Zone -->
                <div id="dropZone" class="border border-2 border-dashed rounded p-4 text-center mb-4"
                     style="border-color: #6c757d !important; background-color: #f8f9fa; cursor: pointer;">
                    <i class="fas fa-cloud-upload-alt fa-3x text-muted mb-2"></i>
                    <p class="mb-1"><strong>Drag & drop files here or click to browse</strong></p>
                    <p class="small text-muted mb-0">Supports: images, documents, videos, audio, 3D models</p>
                    <input type="file" id="fileInput" multiple class="d-none" accept="image/*,application/pdf,.doc,.docx,video/*,audio/*,.obj,.stl,.ply,.gltf,.glb,.dae,.fbx,.3ds">
                </div>

                <!-- Upload Progress -->
                <div id="uploadProgress" class="d-none mb-3">
                    <div class="progress">
                        <div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated"
                             role="progressbar" style="width: 0%"></div>
                    </div>
                    <p id="uploadStatus" class="small text-muted mt-1 mb-0"></p>
                </div>

                {% if media_list %}
                <div class="row">
                    {% for media in media_list %}
                    <div class="col-md-3 mb-3">
                        <div class="card h-100">
                            <div class="card-body text-center">
                                {% if media.media_type == 'image' and media.media_path %}
                                    <a href="/{{ media.media_path }}"
                                       class="glightbox"
                                       data-gallery="us-gallery"
                                       data-title="{{ media.media_name }}"
                                       data-description="{{ media.description if media.description else '' }}">
                                        <img src="/{{ media.media_path }}"
                                             alt="{{ media.media_name }}"
                                             class="img-fluid mb-2"
                                             style="max-height: 150px; object-fit: cover; cursor: pointer;"
                                             onerror="this.parentElement.innerHTML='<i class=\'fas fa-image fa-3x text-muted mb-2\'></i>'">
                                    </a>
                                {% elif media.media_type == 'document' %}
                                    <a href="/{{ media.media_path }}"
                                       class="glightbox"
                                       data-type="iframe"
                                       data-gallery="us-docs"
                                       data-title="{{ media.media_name }}"
                                       data-description="{{ media.description if media.description else '' }}">
                                        <i class="fas fa-file-pdf fa-3x text-danger mb-2" style="cursor: pointer;"></i>
                                    </a>
                                {% elif media.media_type == 'video' %}
                                    <a href="/{{ media.media_path }}"
                                       class="glightbox"
                                       data-type="video"
                                       data-gallery="us-videos"
                                       data-title="{{ media.media_name }}"
                                       data-description="{{ media.description if media.description else '' }}">
                                        <i class="fas fa-video fa-3x text-primary mb-2" style="cursor: pointer;"></i>
                                    </a>
                                {% elif media.media_type == 'audio' %}
                                    <i class="fas fa-music fa-3x text-info mb-2"></i>
                                {% elif media.media_type == 'spreadsheet' %}
                                    <a href="{{ url_for('view_spreadsheet', media_id=media.id_media) }}"
                                       target="_blank"
                                       title="Open in new window">
                                        <i class="fas fa-table fa-3x text-success mb-2" style="cursor: pointer;"></i>
                                    </a>
                                {% elif media.media_type == 'docx' %}
                                    <a href="{{ url_for('view_docx', media_id=media.id_media) }}"
                                       target="_blank"
                                       title="Open in new window">
                                        <i class="fas fa-file-word fa-3x text-primary mb-2" style="cursor: pointer;"></i>
                                    </a>
                                {% elif media.media_type == '3d_model' %}
                                    <a href="{{ url_for('view_3d_model', media_id=media.id_media) }}"
                                       target="_blank"
                                       title="Open in new window">
                                        <i class="fas fa-cube fa-3x text-success mb-2" style="cursor: pointer;"></i>
                                    </a>
                                {% else %}
                                    <i class="fas fa-file fa-3x text-secondary mb-2"></i>
                                {% endif %}
                                <p class="small mb-1"><strong>{{ media.media_name }}</strong></p>
                                {% if media.description %}
                                <p class="small text-muted mb-2">{{ media.description[:50] }}{% if media.description|length > 50 %}...{% endif %}</p>
                                {% endif %}
                                {% if media.is_primary %}
                                <span class="badge bg-success mb-2">{{ _('Primary') }}</span>
                                {% endif %}
                            </div>
                            <div class="card-footer text-center">
                                <div class="btn-group btn-group-sm">
                                    <a href="/{{ media.media_path }}" target="_blank" class="btn btn-primary" title="{{ _('View') }}">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <a href="/{{ media.media_path }}" download="{{ media.media_name }}" class="btn btn-success" title="{{ _('Download') }}">
                                        <i class="fas fa-download"></i>
                                    </a>
                                    <form method="POST"
                                          action="{{ url_for('delete_media', media_id=media.id_media) }}"
                                          style="display: inline;"
                                          onsubmit="return confirm('{{ _('Are you sure you want to delete this media file? This action cannot be undone.') }}');">
                                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                        <button type="submit" class="btn btn-danger" title="{{ _('Delete') }}">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="alert alert-info">
                    <i class="fas fa-info-circle"></i>
                    {{ _('No media files have been uploaded for this US yet.') }}
                    <a href="{{ url_for('upload_media') }}?entity_type=us&entity_id={{ us_id }}">
                        {{ _('Upload your first file') }}
                    </a>
                </div>
                {% endif %}
            </div>
            {% endif %}
        </div>

        <!-- Form Actions -->
        <div class="mt-4 mb-4">
            <button type="submit" class="btn btn-primary btn-lg">
                <i class="fas fa-save"></i> {{ _('Save US') }}
            </button>
            <a href="{{ url_for('us_list') }}" class="btn btn-secondary btn-lg">
                <i class="fas fa-times"></i> {{ _('Cancel') }}
            </a>
        </div>
    </form>
</div>

<script>
// Handle conditional display of tipo_documento and file upload fields based on unita_tipo selection
document.addEventListener('DOMContentLoaded', function() {
    const unitaTipoSelect = document.getElementById('unita_tipo');
    const tipoDocumentoField = document.getElementById('tipo_documento_field');
    const documentoFileField = document.getElementById('documento_file_field');

    function toggleDocFields() {
        if (unitaTipoSelect.value === 'DOC') {
            tipoDocumentoField.style.display = 'block';
            documentoFileField.style.display = 'block';
        } else {
            tipoDocumentoField.style.display = 'none';
            documentoFileField.style.display = 'none';
        }
    }

    // Initialize on page load
    toggleDocFields();

    // Listen for changes
    unitaTipoSelect.addEventListener('change', toggleDocFields);
});

// Drag and Drop Upload for US Media
{% if edit_mode and us_id %}
(function() {
    const dropZone = document.getElementById('dropZone');
    const fileInput = document.getElementById('fileInput');
    const uploadProgress = document.getElementById('uploadProgress');
    const progressBar = document.getElementById('progressBar');
    const uploadStatus = document.getElementById('uploadStatus');
    const usId = {{ us_id }};

    // Get CSRF token from meta tag or form
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content ||
                     document.querySelector('input[name="csrf_token"]')?.value;

    // Click to browse
    dropZone.addEventListener('click', () => fileInput.click());

    // Prevent default drag behaviors
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        dropZone.addEventListener(eventName, preventDefaults, false);
        document.body.addEventListener(eventName, preventDefaults, false);
    });

    function preventDefaults(e) {
        e.preventDefault();
        e.stopPropagation();
    }

    // Highlight drop zone when dragging over it
    ['dragenter', 'dragover'].forEach(eventName => {
        dropZone.addEventListener(eventName, highlight, false);
    });

    ['dragleave', 'drop'].forEach(eventName => {
        dropZone.addEventListener(eventName, unhighlight, false);
    });

    function highlight(e) {
        dropZone.style.borderColor = '#007bff';
        dropZone.style.backgroundColor = '#e7f3ff';
    }

    function unhighlight(e) {
        dropZone.style.borderColor = '#6c757d';
        dropZone.style.backgroundColor = '#f8f9fa';
    }

    // Handle dropped files
    dropZone.addEventListener('drop', handleDrop, false);
    fileInput.addEventListener('change', handleFiles, false);

    function handleDrop(e) {
        const dt = e.dataTransfer;
        const files = dt.files;
        handleFiles({ target: { files: files } });
    }

    function handleFiles(e) {
        const files = e.target.files;
        if (files.length === 0) return;

        uploadFiles(files);
    }

    function uploadFiles(files) {
        const formData = new FormData();

        for (let i = 0; i < files.length; i++) {
            formData.append('files', files[i]);
        }

        formData.append('entity_type', 'us');
        formData.append('entity_id', usId);

        // Show progress
        uploadProgress.classList.remove('d-none');
        progressBar.style.width = '0%';
        uploadStatus.textContent = `Uploading ${files.length} file(s)...`;

        // Upload via AJAX
        const xhr = new XMLHttpRequest();

        xhr.upload.addEventListener('progress', (e) => {
            if (e.lengthComputable) {
                const percentComplete = (e.loaded / e.total) * 100;
                progressBar.style.width = percentComplete + '%';
            }
        });

        xhr.addEventListener('load', () => {
            if (xhr.status === 200) {
                progressBar.style.width = '100%';
                uploadStatus.textContent = 'Upload complete! Refreshing...';
                progressBar.classList.remove('progress-bar-animated');
                progressBar.classList.add('bg-success');

                // Reload page after short delay
                setTimeout(() => {
                    window.location.reload();
                }, 1000);
            } else {
                uploadStatus.textContent = 'Upload failed: ' + xhr.statusText;
                progressBar.classList.add('bg-danger');
            }
        });

        xhr.addEventListener('error', () => {
            uploadStatus.textContent = 'Upload error occurred';
            progressBar.classList.add('bg-danger');
        });

        xhr.open('POST', '/media/upload/ajax', true);

        // Add CSRF token header
        if (csrfToken) {
            xhr.setRequestHeader('X-CSRFToken', csrfToken);
        }

        xhr.send(formData);

        // Reset file input
        fileInput.value = '';
    }
})();
{% endif %}
</script>

{% endblock %}