{% load custom_tags %}
{% load i18n %}

<div class="card an-card">
    <div class="card-header">
        <h2 class="card-header-title">
            <a href="{{ adoption_notice.get_absolute_url }}"> {{ adoption_notice.name }}</a>
        </h2>
    </div>
    <div class="card-content">
        <div class="grid">
            <div class="cell">
                <!--- General Information --->
                <div class="grid">

                    <div class="cell">

                        {% 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>
                        {% else %}
                            <p>
                                <i class="fa-solid fa-location-dot fa-fw"></i>
                                {% if adoption_notice.location %}
                                    {{ adoption_notice.location }}
                                {% else %}
                                    {{ adoption_notice.location_string }}
                                {% endif %}
                            </p>
                        {% endif %}
                    </div>
                    <div class="cell">
                        {% include "fellchensammlung/partials/sex-overview.html" %}
                    </div>
                </div>
            </div>
        </div>

        {% if adoption_notice.get_photos %}
            <div class="gallery">
                {% with photo=adoption_notice.get_photos.0 %}
                    <div class="main-photo minimal">
                        <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 %}
                {% if adoption_notice.get_photos|length > 1 %}
                    <div class="thumbnail-row minimal">
                        {% 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>
                {% else %}
                    {% if adoption_notice.description_100_short %}
                        <div class="content">
                            {{ adoption_notice.description_100_short | render_markdown }}
                        </div>
                    {% endif %}
                {% endif %}
            </div>
        {% else %}
            {% if adoption_notice.description_short %}
                <div class="content">
                    {{ adoption_notice.description_short | render_markdown }}
                </div>
            {% endif %}
        {% endif %}
    </div>
</div>



