{% load i18n %}
{% load custom_tags %}
<div class="card">
    <div class="card-header">
        <h1 class="card-header-title">
            {{ animal.name }}
        </h1>
    </div>
    <div class="card-content">
        <div class="grid">
            <div class="tag cell">{{ animal.species }}</div>
            <div class="tag cell">{{ animal.get_sex_display }}</div>
        </div>
        <div class="block">
            <strong>{% trans 'Alter' %}</strong> {{ animal.hr_age }}
        </div>
        {% if animal.description %}
            <div class="content">
                <p>{{ animal.description | render_markdown }}</p>
            </div>
        {% endif %}

        {% if animal.get_photos %}

            <div class="gallery">
                {% with photo=animal.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 animal.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>
        {% endif %}
    </div>


    <!--- Assume a user does not have edit permissions on animal if they have no other edit permission   --->
    {% if has_edit_permission %}
        <div class="card-footer">
            <a class="card-footer-item"
               href="{% url 'animal-edit' animal_id=animal.pk %}">{% translate 'Bearbeiten' %}</a>
            <a class="card-footer-item"
               href="{% url 'animal-add-photo' animal_id=animal.pk %}">{% translate 'Foto hinzufügen' %}</a>
        </div>
    {% endif %}

</div>
