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

{% block content %}
<div class="row mt-2" style="height: calc(100vh - 200px);">
    <div class="col-md-8" style="max-height: calc(100vh - 200px); overflow: auto;">
        <h3 class="h3">
            <img src="{% static 'assets/artwork_fountain_icon.svg' %}" alt="Fontaine" height="28" width="28" class="me-1"><span class="mx-2">{{ fountain.code}}</span> - <span class="mx-2">{{ fountain.name_fr }}</span>
        </h3>
        <hr>
        <div class="row mb-4">
            <div class="col-md-6">
                <label class="mx-2">Statut:</label><i class="bi bi-circle-fill status_{{ fountain.status }}"></i> {{ fountain.get_status_display }}<br>
                <label class="mx-2">Type:</label>{{ fountain.get_fountain_type_display|default:"" }}<br>
            </div>
            <div class="col-md-6">
                <label class="me-2 mb-2">Localisation:</label>{{ fountain.location_fr|default:"" }}<br>
                {% if fountain.lon %}
                    <a href="https://www.google.com/maps?cbll={{ fountain.lat|floatformat:'6u'}},{{ fountain.lon|floatformat:'6u'}}&cbp=12,0,0,0,5&layer=c&panoid=" target="_blank" style="text-decoration: none; font-size: 16px; display: flex; align-items: center;">
                        <img src="{% static 'common/google-street-view-logo.png' %}" alt="Street View" height="20" style="margin-right: 8px;">
                        View in Google Street View
                    </a>
                {% endif %}
            </div>
        </div>
        <div class="row mb-4">
            <div class="col-md-12">
                <label class="mx-2">Date de construction:</label>{{ fountain.installation_date|date:"F Y"|default:"" }}<br>
                <label class="mx-2">Artiste:</label>{{ fountain.artist|default:"" }}<br>
                <label class="mx-2">Description:</label><br>
                {% if fountain.description_fr %}
                    <div class="mx-2">{{ fountain.description_fr }}</div>
                {% endif %}
            </div>
        </div>
        <div class="row mb-4">
            <div class="col-md-6">
                <label class="mx-2">Dernier entretien:</label>{{ fountain.last_preventive_date|default:"" }}<br>
            </div>
        </div>


        <!-- Documents -->
        <div class="card mb-4">
            <div class="card-header">
                <h4>Documents</h4>
            </div>
            <div class="card-body">
                <div class="row">
                    {% for document in fountain.documents.all %}
                    <div class="col-md-2 mb-3">
                        <a href="{{ document.file.url }}" target="_blank">
                            <div class="img-thumbnail" style="width: 100%; height: 100px; overflow: hidden;">
                                {% if document.thumbnail %}
                                <img src="{{ document.thumbnail.url }}" alt="{{ document.file.name }}" style="width: 100%; height: 100%; object-fit: cover; object-position: center;">
                                {% else %}
                                <img src="{{ document.file.url }}" alt="{{ document.file.name }}" style="width: 100%; height: 100%; object-fit: cover; object-position: center;">
                                {% endif %}
                            </div>
                        </a>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>

        <!-- Interventions -->
        <div class="card mb-4">
            <div class="card-header">
                <h4>Interventions</h4>
            </div>
            <div class="card-body">
                <table id="interventions-table" class="table"
                    data-height="550"
                    data-pagination="true"
                    data-page-size="25"
                    data-click-to-select="true" >
                    <thead>
                        <tr>
                            <th data-field="actions" data-width="100"></th>
                            <th data-field="code">Code</th>
                            <th data-field="title">Titre</th>
                            <th data-field="begin_date">Début</th>
                            <th data-field="statut">Statut</th>
                        </tr>
                        <tbody>
                            {% for interv in interventions %}
                                <tr>
                                    <td>
                                        <a href="{% url 'interventions:interventions_index' %}{{ interv.id }}" type="button" class="btn btn-sm btn-light detail-btn" data-id="${row.id}" data-bs-toggle="tooltip" title="Detail">
                                            <i class="bi bi-info-circle"></i>
                                        </a>
                                    </td>
                                    <td>{{ interv.code }}</td>
                                    <td>{{ interv.title }}</td>
                                    <td>{{ interv.begin_time|date:"d-m-Y H:i" }}</td>
                                    <td>{{ interv.get_status_display }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div id="map">
        </div>
    </div>
</div>

{% endblock content%}


{% block script %}
    {{ fountain.lon|json_script:"lon_value" }}
    {{ fountain.lat|json_script:"lat_value" }}
    <script>
        const feature_lon = JSON.parse(document.getElementById("lon_value").textContent);
        const feature_lat = JSON.parse(document.getElementById("lat_value").textContent);
    </script>
    <script src="{% static 'assets/artworks_detail.js' %}"></script>
{% endblock script %}