{% extends "fellchensammlung/base_generic.html" %}
{% load custom_tags %}
{% load i18n %}

{% block title %}<title>{{ adoption_notice.name }}</title>{% endblock %}

{% block content %}
    <div class="detail-adoption-notice-header">
        <div class="inline-container">
            <h1>{{ adoption_notice.name }}</h1>
            {% if not is_subscribed %}
                <div class="tooltip bottom">
                    <form class="notification-card-mark-read" method="post">
                        {% csrf_token %}
                        <input type="hidden" name="action" value="subscribe">
                        <input type="hidden" name="adoption_notice_id" value="{{ adoption_notice.pk }}">
                        <button class="btn2" type="submit" id="submit"><i class="fa-solid fa-bell"></i></button>
                    </form>
                    <span class="tooltiptext">
                        {% translate 'Abonniere diese Vermittlung um bei Kommentaren oder Statusänderungen benachrichtigt zu werden' %}
                    </span>
                </div>
            {% else %}
                <div class="tooltip bottom">
                    <form class="notification-card-mark-read" method="post">
                        {% csrf_token %}
                        <input type="hidden" name="action" value="unsubscribe">
                        <input type="hidden" name="adoption_notice_id" value="{{ adoption_notice.pk }}">
                        <button class="btn2" type="submit" id="submit"><i class="fa-solid fa-bell-slash"></i></button>
                    </form>
                    <span class="tooltiptext">
                        {% translate 'Deabonnieren. Du bekommst keine Benachrichtigungen zu dieser Vermittlung mehr' %}
                    </span>
                </div>
            {% endif %}
            {% if adoption_notice.is_active %}
                <span id="submit" class="label active-adoption" style=>{% trans 'Aktive Vermittlung' %}</span>
            {% else %}
                <span id="submit" class="label inactive-adoption" style=>{% trans 'Vermittlung inaktiv' %}</span>
            {% endif %}
        </div>
        {% if has_edit_permission %}
            <a class="btn2"
               href="{% url 'adoption-notice-add-photo' adoption_notice_id=adoption_notice.pk %}">{% translate 'Foto hinzufügen' %}</a>
            <a class="btn2 detail-adoption-notice-header"
               href="{% url 'adoption-notice-edit' adoption_notice_id=adoption_notice.pk %}">{% translate 'Bearbeiten' %}</a>
        {% endif %}
    </div>
    <div class="table-adoption-notice-info">
        <table class="responsive">
            <thead>
            <tr>
                <td>{% translate "Ort" %}</td>
                {% if adoption_notice.organization %}
                    <td>{% translate "Organisation" %}</td>
                {% endif %}
                <td>{% translate "Suchen seit" %}</td>
                <td>{% translate "Zuletzt aktualisiert" %}</td>
                <td>{% translate "Weitere Informationen" %}</td>
            </tr>
            </thead>
            <tr>
                <td data-label="{% trans 'Ort' %} ">
                    {% if adoption_notice.location %}
                        {{ adoption_notice.location }}
                    {% else %}
                        {{ adoption_notice.location_string }}
                    {% endif %}
                </td>
                {% if adoption_notice.organization %}
                    <td data-label="{% trans 'Organisation' %}">
                        <div>
                            <a href="{{ adoption_notice.organization.get_absolute_url }}">{{ adoption_notice.organization }}</a>
                            {% if adoption_notice.organization.trusted %}
                                <div class="tooltip top">
                                    <div class="checkmark"><i class="fa-solid fa-check"></i></div>
                                    <span class="tooltiptext">
                                    {% translate 'Diese Organisation kennt sich mit Ratten aus und achtet auf gute Abgabebedingungen' %}
                                    </span>
                                </div>

                            {% endif %}
                        </div>
                    </td>

                {% endif %}

                <td data-label="{% trans 'Suchen seit' %}">{{ adoption_notice.searching_since }}</td>
                <td data-label="{% trans 'Zuletzt aktualisiert' %}">
                    {{ adoption_notice.last_checked_hr }}
                </td>
                <td data-label="{% trans 'Weitere Informationen' %}">
                    {% if adoption_notice.further_information %}
                        <form method="get" action="{% url 'external-site' %}">
                            <input type="hidden" name="url" value="{{ adoption_notice.further_information }}">
                            <button class="btn" type="submit" id="submit">
                                {{ adoption_notice.further_information | domain }} <i
                                    class="fa-solid fa-arrow-up-right-from-square"></i>
                            </button>
                        </form>
                    {% else %}
                        -
                    {% endif %}
                </td>
            </tr>
        </table>
    </div>
    <div class="card">
        <h1>{% translate "Bilder" %}</h1>
        {% for photo in  adoption_notice.get_photos %}
            <img src="{{ MEDIA_URL }}/{{ photo.image }}" alt="{{ photo.alt_text }}">
        {% endfor %}
    </div>
    <div class="card">
        <h1>{% translate "Beschreibung" %}</h1>
        <p>{% if adoption_notice.description %}
            {{ adoption_notice.description | render_markdown }}
        {% else %}
            {% translate "Keine Beschreibung angegeben" %}
        {% endif %}
        </p>
    </div>

    <div>
        {% for animal in adoption_notice.animals %}
            {% include "fellchensammlung/partials/partial-animal-card.html" %}

        {% endfor %}
    </div>

    {% include "fellchensammlung/partials/partial-comment-section.html" %}

{% endblock %}
