{% extends "fellchensammlung/base.html" %}
{% load i18n %}
{% load crispy_forms_tags %}
{% load widget_tweaks %}
{% load static %}

{% block title %}<title>{% translate "Vermittlung hinzufügen" %}</title>{% endblock %}

{% block additional_scrips %}
    <script src="{% static 'fellchensammlung/js/adoption-notice-form.js' %}"></script>
{% endblock %}


{% block content %}
    <h1 class="title is-1">{% translate "Vermitteln" %}</h1>
    <div class="notification is-info">
        <p>
            {% url 'terms-of-service' as rules_url %}
            {% trans "Regeln" as rules_text %}
            {% blocktranslate with rules_link='<a href="'|add:rules_url|add:'">'|add:rules_text|add:'</a>'|safe %}
                Bitte mach dich zunächst mit unseren {{ rules_link }} vertraut. Dann trage hier die ersten Informationen
                ein.
                Fotos kannst du im nächsten Schritt hinzufügen.
            {% endblocktranslate %}
        </p>
    </div>

    <div id="add-adoption-notice-form">

        <form method="post" enctype="multipart/form-data">
            {% csrf_token %}

            <div class="field">
                <label class="label" for="an-name">{{ form.name.label }}
                    {% if form.name.field.required %}<span class="special_class">*</span>{% endif %}</label>
                {{ form.name|add_class:"input"|attr:"id:an-name" }}
            </div>

            <div class="field">
                <label class="label" for="an-description">
                    {% translate 'Beschreibung' %}
                    {% if form.description.field.required %}<span class="special_class">*</span>{% endif %}
                </label>
                {{ form.description|add_class:"input textarea"|attr:"rows:3"|attr:"id:an-description" }}
            </div>


            <div class="field">
                <label class="label" for="an-location">
                    {{ form.location_string.label }}
                    {% if form.location_string.field.required %}<span class="special_class">*</span>{% endif %}
                </label>
                {{ form.location_string|add_class:"input"|attr:"id:an-location" }}
            </div>

            <div class="field">
                <label class="checkbox" for="an-group-only">
                    {{ form.group_only.label }}
                    {% if form.group_only.field.required %}<span class="special_class">*</span>{% endif %}
                </label>
                {{ form.group_only|add_class:"checkbox"|attr:"id:an-group-only" }}
            </div>

            <div class="field">
                <label class="label" for="an-searching-since">
                    {{ form.searching_since.label }}
                    {% if form.searching_since.field.required %}<span class="special_class">*</span>{% endif %}
                </label>
                {{ form.searching_since|add_class:"input"|attr:"id:an-searching-since"|attr:"type:date" }}
            </div>


            <div class="field">
                <label class="label" for="an-further-information">
                    {{ form.further_information.label }}
                    {% if form.further_information.field.required %}<span class="special_class">*</span>{% endif %}
                </label>
                {{ form.further_information|add_class:"input"|attr:"id:an-further-information"|attr:"type:url" }}
                <div class="help">
                    {{ form.further_information.help_text }}
                </div>
            </div>


            <div class="field">
                <label class="label" for="an-organization">
                    {{ form.organization.label }}
                    {% if form.organization.field.required %}<span class="special_class">*</span>{% endif %}
                </label>
                <div class="select">
                    {{ form.organization|attr:"id:an-organization" }}
                </div>
                <div class="help">
                    {{ form.organization.help_text }}
                </div>
            </div>

            <div class="notification is-info">
                <p>

                    {% blocktranslate %}
                        Gibt hier schonmal erste Details zu den Tieren an.
                        Wenn du Details und Fotos zu den Tieren hinzufügen willst oder ihr Geschlecht und Geburtsdatum
                        anpassen
                        willst,
                        kannst du das im nächsten Schritt tun.
                    {% endblocktranslate %}
                </p>
            </div>

            <div class="field">
                <label class="label" for="an-species">
                    {% translate 'Tierart' %}
                    {% if form.species.field.required %}<span class="special_class">*</span>{% endif %}
                </label>
                <div class="select">
                    {{ form.species|attr:"id:an-species" }}
                </div>
            </div>


            <div class="field">
                <label class="label" for="an-num-animals">
                    {{ form.num_animals.label }}
                    {% if form.num_animals.field.required %}<span class="special_class">*</span>
                        </label>
                        {{ form.num_animals|add_class:"input"|attr:"id:an-num-animals" }}{% endif %}
            </div>

            <div class="field">
                <label class="label" for="an-sex">
                    {% translate 'Geschlecht' %}
                    {% if form.sex.field.required %}<span class="special_class">*</span>{% endif %}
                </label>
                <div class="select">
                    {{ form.sex|attr:"id:an-sex" }}
                </div>
            </div>

            <div class="field">
                <label class="label" for="an-date-of-birth">
                    {{ form.date_of_birth.label }}
                    {% if form.date_of_birth.field.required %}<span class="special_class">*</span>{% endif %}
                </label>
                {{ form.date_of_birth|add_class:"input"|attr:"id:an-date-of-birth"|attr:"type:date" }}
            </div>


            <input class="button is-primary" type="submit" value="{% translate "Speichern" %}">
        </form>
    </div>
{% endblock %}