{% load i18n %}
{% load custom_tags %}
<div class="card">
    <div class="detail-animal-header">
        <h1><a href="{% url 'animal-detail' animal_id=animal.pk %}">{{ animal.name }}</a></h1>


        <div class="tags">
            <div class="tag species">{{ animal.species }}</div>
            <div class="tag sex">{{ animal.get_sex_display }}</div>
        </div>
        <!--- Assume a user does not have edit permissions on animal if they have no other edit permission   --->
        {% if has_edit_permission %}
            <div class="container-edit-buttons">
                <a class="btn" href="{% url 'animal-edit' animal_id=animal.pk %}">{% translate 'Bearbeiten' %}</a>
                <a class="btn"
                   href="{% url 'animal-add-photo' animal_id=animal.pk %}">{% translate 'Foto hinzufügen' %}</a>
            </div>
        {% endif %}
    </div>

    {% if animal.description %}
        <p>{{ animal.description | render_markdown }}</p>
    {% endif %}
    {% for photo in  animal.get_photos %}
        <img src="{{ MEDIA_URL }}/{{ photo.image }}" alt="{{ photo.alt_text }}">
    {% endfor %}
</div>
