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

{% 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">
            <i class="bi bi-trash3"></i>
            <span class="mx-2">{{ location.code }}</span> - <span class="mx-2">{{ location.get_name }}</span>
        </h3>
        <hr>

        <!-- Location metadata -->
        <div class="row mb-4">
            <div class="col-md-6">
                {% if location.municipality %}
                    <label class="me-2 mb-2">{% translate "Municipality:" %}</label>{{ location.municipality }}<br>
                {% endif %}
                {% if location.road_code %}
                    <label class="me-2 mb-2">{% translate "Road code:" %}</label>{{ location.road_code }}<br>
                {% endif %}
                {% if location.section_code %}
                    <label class="me-2 mb-2">{% translate "Section:" %}</label>{{ location.section_code }}<br>
                {% endif %}
                {% if location.street_level %}
                    <label class="me-2 mb-2">{% translate "Street level:" %}</label>{{ location.street_level }}<br>
                {% endif %}
            </div>
            <div class="col-md-6">
                {% if location.lon %}
                    <a href="https://www.google.com/maps?cbll={{ location.lat|floatformat:'6u' }},{{ location.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="{% translate 'Street View' %}" height="20" style="margin-right: 8px;">
                        {% translate "View in Google Street View" %}
                    </a>
                {% endif %}
            </div>
        </div>

        <!-- Assets -->
        <div class="card mb-4">
            <div class="card-header">
                <h4 data-bs-toggle="collapse" href="#assets_card_body" role="button">{% translate "Assets" %}</h4>
            </div>
            <div class="card-body collapse show" id="assets_card_body">
                <ul class="nav nav-tabs" id="assetsTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="assets-active-tab" data-bs-toggle="tab"
                                data-bs-target="#assets-active" type="button" role="tab"
                                aria-controls="assets-active" aria-selected="true" style="color: black;">
                            {% translate "Active" %}
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="assets-archived-tab" data-bs-toggle="tab"
                                data-bs-target="#assets-archived" type="button" role="tab"
                                aria-controls="assets-archived" aria-selected="false" style="color: black;">
                            {% translate "All" %}
                        </button>
                    </li>
                </ul>

                <div class="tab-content my-2" id="assetsTabContent">

                    <!-- Active assets -->
                    <div class="tab-pane fade show active" id="assets-active" role="tabpanel" aria-labelledby="assets-active-tab">
                        <ul>
                            <!-- Litter bins -->
                            <li>
                                {% translate "Litter bins" %} ({{ assets.litter_bins.count }})
                                <ul>
                                    {% for bin in assets.litter_bins %}
                                    <li>
                                        <a class="mx-2" href="{% url 'assets:clean_assets_detail' 'cleanlitterbin' bin.id %}">{{ bin.code }}</a>
                                        {% if bin.model %}<span class="text-muted">{{ bin.model.get_name }}</span>{% endif %}
                                        <span class="badge bg-secondary ms-1">{{ bin.get_status_display }}</span>
                                        {% if bin.volume %}<span class="text-muted">({{ bin.volume }} L)</span>{% endif %}
                                    </li>
                                    {% empty %}
                                    <li class="text-muted">{% translate "No litter bins" %}</li>
                                    {% endfor %}
                                </ul>
                            </li>
                            <!-- Glass containers -->
                            <li>
                                {% translate "Glass containers" %} ({{ assets.glass_containers.count }})
                                <ul>
                                    {% for container in assets.glass_containers %}
                                    <li>
                                        <a class="mx-2" href="{% url 'assets:clean_assets_detail' 'cleanglasscontainer' container.id %}">{{ container.code }}</a>
                                        {% if container.model %}<span class="text-muted">{{ container.model.get_name }}</span>{% endif %}
                                        <span class="badge bg-secondary ms-1">{{ container.get_status_display }}</span>
                                        {% if container.capacity %}<span class="text-muted">({{ container.capacity }} L)</span>{% endif %}
                                        {% if container.is_underground %}<span class="badge bg-info ms-1">{% translate "Underground" %}</span>{% endif %}
                                    </li>
                                    {% empty %}
                                    <li class="text-muted">{% translate "No glass containers" %}</li>
                                    {% endfor %}
                                </ul>
                            </li>
                        </ul>
                    </div>

                    <!-- All assets -->
                    <div class="tab-pane fade" id="assets-archived" role="tabpanel" aria-labelledby="assets-archived-tab">
                        <ul>
                            <li>
                                {% translate "Litter bins" %} ({{ all_assets.litter_bins.count }})
                                <ul>
                                    {% for bin in all_assets.litter_bins %}
                                    <li>
                                        <a class="mx-2" href="{% url 'assets:clean_assets_detail' 'cleanlitterbin' bin.id %}">{{ bin.code }}</a>
                                        {% if bin.model %}<span class="text-muted">{{ bin.model.get_name }}</span>{% endif %}
                                        <span class="badge bg-secondary ms-1">{{ bin.get_status_display }}</span>
                                    </li>
                                    {% empty %}
                                    <li class="text-muted">{% translate "No litter bins" %}</li>
                                    {% endfor %}
                                </ul>
                            </li>
                            <li>
                                {% translate "Glass containers" %} ({{ all_assets.glass_containers.count }})
                                <ul>
                                    {% for container in all_assets.glass_containers %}
                                    <li>
                                        <a class="mx-2" href="{% url 'assets:clean_assets_detail' 'cleanglasscontainer' container.id %}">{{ container.code }}</a>
                                        {% if container.model %}<span class="text-muted">{{ container.model.get_name }}</span>{% endif %}
                                        <span class="badge bg-secondary ms-1">{{ container.get_status_display }}</span>
                                    </li>
                                    {% empty %}
                                    <li class="text-muted">{% translate "No glass containers" %}</li>
                                    {% endfor %}
                                </ul>
                            </li>
                        </ul>
                    </div>

                </div>
            </div>
        </div>

        <!-- Interventions -->
        <div class="card mb-4">
            <div class="card-header">
                <h4>{% translate "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">{% translate "Code" %}</th>
                            <th data-field="title">{% translate "Title" %}</th>
                            <th data-field="begin_date">{% translate "Start" %}</th>
                            <th data-field="status">{% translate "Status" %}</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" data-bs-toggle="tooltip" title="{% translate '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>
                            {% empty %}
                            <tr>
                                <td colspan="5" class="text-muted text-center">{% translate "No interventions" %}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </thead>
                </table>
            </div>
        </div>

    </div><!-- /col-md-8 -->

    <!-- Map -->
    <div class="col-md-4">
        <div id="map"></div>
    </div>
</div>
{% endblock content %}


{% block script %}
    {{ location.lon|json_script:"lon_value" }}
    {{ location.lat|json_script:"lat_value" }}
    {{ geom|json_script:"geom_value" }}
    <script>
        const clean_index_url  = "{% url 'assets:clean_index' %}";
        const feature_lon = JSON.parse(document.getElementById("lon_value").textContent);
        const feature_lat = JSON.parse(document.getElementById("lat_value").textContent);
        const geom = JSON.parse(document.getElementById("geom_value").textContent);
    </script>
    <script src="{% static 'common/turf.min.js' %}"></script>
    <script src="{% static 'assets/clean_location_detail.js' %}"></script>
{% endblock script %}