{% extends "fellchensammlung/base.html" %}
{% load custom_tags %}
{% load admin_urls %}
{% load i18n %}
{% load static %}

{% block title %}<title>{{ adoption_notice.name }}</title>{% endblock %}
{% block og_title %}
    <meta property="og:title" content="{{ adoption_notice.name }} - Notfellchen"/>
{% endblock %}
{% block description %}
    <meta name="description" content="{{ adoption_notice.description }}">
{% endblock %}
{% block og_description %}
    <meta name="og:description" content="{{ adoption_notice.description }}">
{% endblock %}
{% block canonical_url %}{% host %}
    {% url 'adoption-notice-detail' adoption_notice_id=adoption_notice.id %}{% endblock %}

{% block og_image %}
    {% if adoption_notice.get_photos %}
        <meta property="og:image" content="{{ MEDIA_URL }}{{ adoption_notice.get_photos.0.image }}"/>
    {% else %}
        <meta property="og:image" content="{% static 'fellchensammlung/img/link_preview.png' %}"/>
    {% endif %}
{% endblock %}

{% block content %}
    {% include "fellchensammlung/partials/partial-adoption-notice-status.html" %}
    <!--- Title level (including action dropdown) -->
    <div class="block is-flex is-justify-content-space-between">
        <div class="">
            <h2 class="title is-3 is-size-4-mobile">{{ adoption_notice.name }}</h2>
        </div>

        <div class="">
            <div class="dropdown is-right">
                <div class="dropdown-trigger">
                    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu4">
                        <span><i class="fas fa-gear" aria-label="{% trans 'Aktionen' %}"></i></span>
                        <span class="icon is-small">
                                <i class="fas fa-angle-down" aria-hidden="true"></i>
                            </span>
                    </button>
                </div>
                <!--- Action menu (dropdown) --->
                <div class="dropdown-menu" role="menu">
                    <div class="dropdown-content">
                        {% if is_subscribed %}
                            <form class="dropdown-item" method="POST">
                                {% csrf_token %}
                                <input type="hidden" name="action" value="unsubscribe">

                                <button type="submit" id="submit">
                                    <i class="fas fa-bell-slash fa-fw"
                                       aria-hidden="true"></i> {% trans 'Deabonnieren' %}
                                </button>

                            </form>
                        {% else %}
                            <form class="dropdown-item" method="POST">
                                {% csrf_token %}
                                <input type="hidden" name="action" value="subscribe">

                                <button type="submit" id="submit">
                                    <i class="fas fa-bell fa-fw"
                                       aria-hidden="true"></i> {% trans 'Abonnieren' %}
                                </button>

                            </form>
                        {% endif %}
                        <hr class="dropdown-divider">

                        {% if has_edit_permission %}
                            <form class="dropdown-item" method="POST">
                                {% csrf_token %}
                                <input type="hidden" name="action" value="checked_active">
                                <button type="submit" id="submit">
                                    <i class="fas fa-check fa-fw"
                                       aria-hidden="true"></i> {% trans 'Als aktiv bestätigen' %}
                                </button>
                            </form>
                            <a class="dropdown-item"
                               href="{% url 'adoption-notice-edit' adoption_notice_id=adoption_notice.pk %}">
                                <i class="fas fa-pencil fa-fw"
                                   aria-hidden="true"></i> {% translate 'Bearbeiten' %}
                            </a>
                            <a class="dropdown-item"
                               href="{% url 'adoption-notice-add-photo' adoption_notice.pk %}">
                                <i class="fas fa-image fa-fw"
                                   aria-hidden="true"></i> {% trans 'Bilder hinzufügen' %}
                            </a>
                            <a class="dropdown-item"
                               href="{% url 'adoption-notice-add-animal' adoption_notice.pk %}">
                                <i class="fas fa-plus fa-fw"
                                   aria-hidden="true"></i> {% trans 'Tier hinzufügen' %}
                            </a>
                            <a class="dropdown-item"
                               href="{% url 'adoption-notice-close' adoption_notice_id=adoption_notice.pk %}">
                                <i class="fas fa-circle-xmark fa-fw"
                                   aria-hidden="true"></i> {% trans 'Deaktivieren' %}
                            </a>
                            <hr class="dropdown-divider">
                        {% endif %}
                        <a class="dropdown-item" href="{{ adoption_notice.get_report_url }}">
                            <i class="fas fa-flag"
                               aria-hidden="true"></i> {% trans 'Melden' %}
                        </a>
                        {% if request.user.is_superuser %}
                            {% if oxitraffic_base_url %}
                                <hr class="dropdown-divider">
                                <a class="dropdown-item"
                                   href="{{ oxitraffic_base_url }}/stats?path={{ adoption_notice.get_absolute_url }}">
                                    <i class="fas fa-chart-line fa-fw"></i> {% trans 'Aufrufe' %}
                                </a>
                            {% endif %}
                            <hr class="dropdown-divider">
                            <a class="dropdown-item is-warning"
                               href="{% url adoption_notice_meta|admin_urlname:'change' adoption_notice.pk %}">
                                <i class="fa-solid fa-tools fa-fw"></i> Admin interface
                            </a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="columns">
        <div class="column is-two-thirds">
            <!--- General Information --->
            <div class="grid">
                <div class="cell">
                    <div class="grid">
                        {% if adoption_notice.organization %}
                            <div class="cell">
                        <span>
                            <i class="fa-solid fa-building fa-fw" aria-label="{% trans 'Tierschutzorganisation' %}"></i>
                                <a href="{{ adoption_notice.organization.get_absolute_url }}"> {{ adoption_notice.organization }}</a>
                        </span>

                            </div>
                        {% endif %}

                        <div class="cell">
                            <span>
                                <i class="fa-solid fa-location-dot fa-fw" aria-label="{% trans 'Ort' %}"></i>
                                {% if adoption_notice.location %}
                                    {{ adoption_notice.location }}
                                {% else %}
                                    {{ adoption_notice.location_string }}
                                {% endif %}
                            </span>
                        </div>
                        <div class="cell">
                            {% include "fellchensammlung/partials/sex-overview.html" %}
                        </div>
                    </div>
                </div>
            </div>

            <!--- Images and Description --->
            <div class="columns block">
                <!--- Images --->
                {% if adoption_notice.get_photos %}
                    <div class="column block">
                        <div class="card">
                            {% if not adoption_notice.is_active %}
                                <div class="cover">{{ adoption_notice.status_description_short }}</div>
                            {% endif %}
                            <div class="grid card-content">
                                <div class="gallery">
                                    {% with photo=adoption_notice.get_photos.0 %}
                                        <div class="main-photo">
                                            <a href="{{ MEDIA_URL }}{{ photo.image }}"
                                               data-pswp-width="{{ photo.image.width }}"
                                               data-pswp-height="{{ photo.image.height }}"
                                               target="_blank">
                                                <img src="{{ MEDIA_URL }}{{ photo.image }}"
                                                     alt="{{ photo.alt_text }}">
                                            </a>
                                        </div>
                                    {% endwith %}

                                    <div class="thumbnail-row">
                                        {% for photo in adoption_notice.get_photos|slice:"1:4" %}
                                            <div class="thumbnail">
                                                <a href="{{ MEDIA_URL }}{{ photo.image }}"
                                                   data-pswp-width="{{ photo.image.width }}"
                                                   data-pswp-height="{{ photo.image.height }}"
                                                   target="_blank">
                                                    <img src="{{ MEDIA_URL }}{{ photo.image }}"
                                                         alt="{{ photo.alt_text }}">
                                                </a>
                                            </div>
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endif %}
                <!--- Description --->
                <div class="column block">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-header-title title is-4">{% translate "Beschreibung" %}</h4>
                        </div>
                        <div class="card-content content">
                            <p class="expandable">{% if adoption_notice.description %}
                                {{ adoption_notice.description | render_markdown }}
                            {% else %}
                                {% translate "Keine Beschreibung angegeben" %}
                            {% endif %}
                            </p>
                            <hr>
                            <p>
                                <strong>
                                    {% translate 'Zuletzt auf Aktualität überprüft:' %}
                                </strong>
                                {{ adoption_notice.last_checked|time_since_hr }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="block">
                {% include 'fellchensammlung/partials/adoption_process/base.html' %}
            </div>
            <div class="block">
                {% if adoption_notice.further_information %}
                    <form method="get" action="{% url 'external-site' %}">
                        <input type="hidden" name="url" value="{{ adoption_notice.further_information }}">
                        <button class="button is-warning is-fullwidth" type="submit" id="submit">
                            {% translate 'Weitere Informationen' %}: {{ adoption_notice.further_information | domain }}
                            <i
                                    class="fa-solid fa-arrow-up-right-from-square fa-fw"></i>
                        </button>
                    </form>
                {% endif %}
            </div>
        </div>
        <div class="column">
            {% for animal in adoption_notice.animals %}
                <div class="block">
                    {% include "fellchensammlung/partials/partial-animal-card.html" %}
                </div>
            {% endfor %}
        </div>
    </div>
    <hr>


    <div class="block">
        {% include "fellchensammlung/partials/partial-comment-section.html" %}
    </div>
{% endblock %}
