{% extends "fellchensammlung/base.html" %}
{% load custom_tags %}
{% 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 %}
    <div class="columns">
        <div class="column is-two-thirds">
            <!--- Title level (including action dropdown) -->
            <div class="level">
                <div class="level-left">
                    <div class="level-item">
                        <p class="title is-3 is-size-4-mobile">{{ adoption_notice.name }}</p>
                    </div>
                </div>

                <div class="level-right">
                    <div class="level-item">
                        <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 has_edit_permission %}

                                        <a class="dropdown-item">
                                            <i class="fas fa-check"
                                               aria-hidden="true"></i> {% trans 'Als aktiv bestätigen' %}
                                        </a>
                                        <a class="dropdown-item"
                                           href="{% url 'adoption-notice-edit' adoption_notice_id=adoption_notice.pk %}">
                                            <i class="fas fa-pencil"
                                               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"
                                               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"
                                               aria-hidden="true"></i> {% trans 'Tier hinzufügen' %}
                                        </a>
                                        <a class="dropdown-item">
                                            <i class="fas fa-circle-xmark"
                                               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>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--- General Information --->
            <div class="grid">
                <div class="cell">
                    <div class="grid">

                        <div class="cell">
                        <span>
                            <strong>{% translate "Ort" %}:</strong>
                            {% 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">
                <!--- Images --->
                {% if adoption_notice.get_photos %}
                    <div class="column block">
                        <div class="card">
                            <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">
                            <h1 class="card-header-title title is-4">{% translate "Beschreibung" %}</h1>
                        </div>
                        <div class="card-content">
                            <p class="expandable">{% if adoption_notice.description %}
                                {{ adoption_notice.description | render_markdown }}
                            {% else %}
                                {% translate "Keine Beschreibung angegeben" %}
                            {% endif %}
                            </p>
                        </div>
                    </div>
                </div>
            </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-primary is-fullwidth" type="submit" id="submit">
                            {{ 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>



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