{% extends 'base.html' %}
{% block content %}
<h2 class="mb-4 fw-bold text-white">Image Processing</h2>

<form class="mb-4" method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit" class="btn btn-primary">Upload Image</button>
</form>

{% if proccessed %}
<div class="mt-4">
    <div class="nav nav-tabs" id="myTab" role="tablist">
        <a class="nav-item nav-link active" id="home-tab" data-bs-toggle="tab" href="#home-tab-pane">Uploaded Image</a>
        <a class="nav-item nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile-tab-pane">Face Detects</a>
        <a class="nav-item nav-link" id="contact-tab" data-bs-toggle="tab" href="#contact-tab-pane">OCR Texts</a>
        <a class="nav-item nav-link" id="disabled-tab" data-bs-toggle="tab" href="#disabled-tab-pane">Metadata</a>
        <a class="nav-item nav-link" id="augmentive-tab" data-bs-toggle="tab" href="#augmentive-tab-pane">Augmentive</a>
    </div>

    <div class="tab-content mt-4">
        <div id="home-tab-pane" class="tab-pane fade show active">
            <img class="img-fluid mx-auto rounded" src="{{ uploaded_base64 }}" alt="Uploaded Image">
        </div>

        <div id="profile-tab-pane" class="tab-pane fade">
            {% if cropped_faces %}
            <div class="row g-3">
                <div class="col-md-5">
                    <h3 class="mt-4 fw-bold">Detected Faces</h3>
                    <img class="img-fluid rounded" src="{{ image_with_labels }}" alt="Detected Faces">
                </div>

                <div class="col-md-7">
                    <h3 class="mt-4 fw-bold">Cropped Faces</h3>
                    <div class="d-flex flex-wrap gap-4">
                        {% for face, face_name, distance, fdescription in cropped_faces %}
                        <div class="text-center text-xs" style="width: 80px;">
                            <img src="{{ face }}" alt="Cropped Face" class="img-thumbnail img-fluid mb-1">
                            <div style="font-size:10px">
                                <strong>{{ face_name }}</strong><br>{{ fdescription }}
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% endif %}
        </div>

        <div id="contact-tab-pane" class="tab-pane fade">
            {% if texts %}
            <div class="d-flex flex-wrap gap-2">
                {% for text in texts %}
                <span class="badge bg-success text-white">{{ text }}</span>
                {% endfor %}
            </div>
            {% endif %}
        </div>

        <div id="disabled-tab-pane" class="tab-pane fade">
            <div class="d-flex flex-wrap gap-4">
                {% if metadata %}
                <div class="w-100">
                    <table class="table table-sm table-striped">
                        <thead class="table-light">
                            <tr>
                                <th>IPTC Field</th>
                                <th>Value</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for tag, value in metadata.items %}
                            <tr>
                                <td>{{ tag }}</td>
                                <td>{{ value }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% endif %}

                {% if exifs %}
                <div class="w-100">
                    <table class="table table-sm  table-striped">
                        <thead class="table-light">
                            <tr>
                                <th>EXIF Field</th>
                                <th>Value</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for tag, value in exifs.items %}
                            <tr>
                                <td>{{ tag }}</td>
                                <td>{{ value }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% endif %}
            </div>
        </div>

        <div id="augmentive-tab-pane" class="tab-pane fade">
            {% if description %}
            <h3 class="fw-semibold">{{ description }}</h3>
            {% endif %}
        </div>

        <div id="reverse-tab-pane" class="tab-pane fade">
            {% if reverse_images %}
            {{ reverse_images }}
            {% endif %}
        </div>
    </div>
</div>

{% endif %}
{% endblock %}