{% extends "base.html" %}
{% load juntagrico.config %}
{% load i18n static %}

{% block page_title %}
    <h3>{% translate "Beitragsrunde:" %} {{ round.name }}</h3>
{% endblock %}

{% block content %}
    {% if round.description %}
        {{ round.description|safe }}
    {% endif %}
    {% config "currency" as c_currency %}
    {% if form.contribution %}
        <div class="row">
            <div class="col-12">
                <p>
                    {% blocktrans trimmed with contribution=form.contribution.price %}
                        Bisheriges Gebot: <strong>{{ c_currency }} {{ contribution }}</strong>
                    {% endblocktrans %}
                </p>
            </div>
        </div>
    {% endif %}
    <form id="jcr_selection_form" method="POST">
        {% csrf_token %}
        <div class="row">
            {% for selection in form.get_selections %}
                {% include 'jcr/snippets/option.html' with option=selection.selected_option %}
            {% endfor %}
            {% if round.other_amount %}
                <div class="col-md-4">
                    <div class="jcr-option jcr-option-custom">
                        <h4 class="custom-control custom-radio jcr-option-title">
                            <input type="radio" id="option_other" name="selection" value="other" class="custom-control-input"{% if form.selection.value == 'other' %} checked{% endif %}>
                            <label class="custom-control-label" for="option_other">
                                {% trans "Anderer Betrag" %}
                            </label>
                        </h4>
                        <div class="form-group">
                            <label for="other_amount">{% blocktrans %}Beitrag in {{ c_currency }}{% endblocktrans %}</label>
                            <input type="number" class="form-control{% if form.other_amount.errors %} is-invalid{% endif %}" id="other_amount" name="other_amount"
                                   aria-describedby="other_amount_help" value="{{ form.other_amount.value }}"
                                   onclick="$('#option_other').click()">
                            {% if form.other_amount.errors %}
                                {% for error in form.other_amount.errors %}
                                    <p id="error_{{ forloop.counter }}_{{ form.other_amount.auto_id }}" class="invalid-feedback"><strong>{{ error }}</strong></p>
                                {% endfor %}
                            {% endif %}
                            <small id="other_amount_help" class="form-text text-muted">
                                {% trans "Wähle einen anderen Beitrag" %}
                            </small>
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>
        <div class="row">
            <div class="col-md-12">
                {%if round.contact_me_text %}
                    <div class="custom-control custom-switch mb-3">
                        <input type="checkbox" class="custom-control-input" id="contact_me" name="contact_me" {% if form.contact_me.value %} checked{% endif %}>
                        <label class="custom-control-label" for="contact_me">
                            {{ round.contact_me_text }}
                        </label>
                    </div>
                {% endif %}
                <button type="submit" class="btn btn-primary btn-lg">{% trans "Gebot abgeben" %}</button>
            </div>
        </div>
    </form>
{% endblock %}

{% block styles %}
    <link href="{% static "jcr/css/style.css" %}" rel="stylesheet"/>
{% endblock %}