{% extends "base.html" %}
{% load i18n %}
{% block badge__menu %}cur{% endblock %}
{% block content %}
<div class="title">
    <h2>Бейджи</h2>
</div>

<table class="g g_padding-t_XL g_nobr g_gap-y_L g_gap-x_XL">
    <tr>
        <td class="c c_gap_L">
            <div class="b">
                <table class="b-t w330">
                    <thead>
                        <tr>
                            <th>{% trans "Название бейджа" %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for badge in badges%}
                        <tr>
                            <td><a href="{% url 'badge' badge.id %}" class="link link_nav {% if badge.id == badge_id %} link_nav_cur {% endif %}" data-url="{{ badge.image_url }}">
                                    {{ badge.name }}
                            </a></td>
                        </tr>
                        {% empty %}
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            <div class="b">
                <a href="{% url 'badge' %}" class="button button_size_L button_type_normal">
                    <span class="button__label">{% trans "Создать бейдж" %}</span>
                </a>
            </div>
        </td>
        <td class="c">
            <table class="g g_max g_gap_L">
                
            {% if messages %}
                <tr><td class="c">
                    {% for message in messages %}
                        <p class="{{ message.tags }}">{{ message }}</p>
                    {% endfor %}
                </td/></tr>
            {% endif %}
                {% if badge %}
            <tr><td class="c">
                    <form action="{% url "user_profile:add_badge" badge.id %}" method="POST" class="form_badge">{% csrf_token %}
                        <table class="g g_gap_XL">
                            <tbody>
                                <tr>
                                    <td class="c">
                                        <span class="input input_size_L w550 input_type_normal input_state_empty tt-z-index">
                                            <input size="1" autocomplete="off" placeholder="{% trans "Имя пользователя" %}" class="input__input typeahead" name="username">
                                            <div class="input__clear"></div>
                                            <div class="input__ground"></div>
                                        </span>
                                        <button class="button button_size_L button_type_normal button_pin_left">
                                            <span class="button__label">{% trans "Добавить" %}</span>
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </form>
        </td></tr>
                {% endif %}
        <tr><td class="c">
                <form action="{{ form.get_action_url }}" method="post" enctype="multipart/form-data" class="form_badge">
                {% csrf_token %}
                <table class="g g_gap_XL">
                    <tr>
                        <td class="c">
                            <span class="input input_size_L w550 {% if form.name.errors %}error{% endif %}">
                                <input size="1" name="name" autocomplete="off"
                                placeholder="{% trans "Название бейджа по-русски" %}"
                                value="{% if form.name.value %}{{form.name.value}}{% endif %}"
                                class="input__input">
                            </span>
                            {% if form.name.errors %}
                            <span class="error-forms">
                                {{form.name.errors }}
                            </span>
                            {% endif %}
                        </td>
                    </tr>
                    <tr>
                        <td class="c">
                            <span class="input input_size_L w550 {% if form.name_en.errors %}error{% endif %}">
                                <input size="1" name="name_en" autocomplete="off"
                                placeholder="{% trans "Название бейджа по-английски" %}"
                                value="{% if form.name_en.value %}{{form.name_en.value}}{% endif %}"
                                class="input__input">
                            </span>
                            {% if form.name_en.errors %}
                            <span class="error-forms">
                                {{ form.name_en.errors }}
                            </span>
                            {% endif %}
                        </td>
                    </tr>
                    <tr>
                        <td class="c">
                            <div class="b b_middle b_gap-x_L form_badge_type">
                                <div class="c">
                                    <span class="check check_size_M {% if form.is_automatic.errors %}error{% endif %}">
                                        <input type="checkbox" name="is_automatic" {% if form.is_automatic.value %}checked{% endif %} >
                                        <span class="check__label">{% trans "Назначать автоматом" %}</span>
                                    </span>
                                </div>
                                <div class="c">
                                    <span class="js-select js-select_size_L w187 {% if form.trigger.errors %}error{%endif%}" data-placeholder="">
                                        <select name="trigger">
                                            {% for code, trigger_name in form.trigger.field.choices %}
                                                {% if form.trigger.value == code %}
                                            <option value="{{ code }}" selected>{{ trigger_name }}</option>
                                                {% else %}
                                            <option value="{{ code }}">{{ trigger_name }}</option>
                                                {% endif %}
                                            {% endfor %}
                                        </select>
                                    </span>
                                </div>
                                <div class="c">
                                    <span class="js-select js-select_size_L w160 {% if form.check_interval.errors %}error{%endif%}" data-placeholder="">
                                        <select name="check_interval">
                                            {% for code, check_interval in form.check_interval.field.choices %}
                                            {% if form.check_interval.value == code %}
                                            <option value="{{ code }}" selected>{{ check_interval }}</option>
                                            {% else %}
                                            <option value="{{ code }}">{{ check_interval }}</option>
                                            {% endif %}
                                            {% endfor %}
                                        </select>
                                    </span>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="c">
                            <div class="badge form_badge_image">
                                <div class="badge__img">
                                    {% if badge.image_url %}
                                    <img src="{{ badge.image_url }}">
                                    {% endif %}
                                </div>
                                <div class="badge__ctrl">
                                    <label class="button button_size_L button_type_normal button_file">
                                        <input type="file" name="image">
                                        <span class="button__label">{% trans "Загрузить изображение" %}</span>
                                    </label>
                                    <p class="badge__desc">
                                        {% trans "PNG-файл" %}
                                        <br>{% trans "240 × 240 пикселей" %}
                                    </p>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="c">
                            <div class="b b_gap-x_XS control_buttons">
                                <div class="c">
                                    <button class="button button_size_L button_type_action form_badge_save button_disable_yes">
                                        <span class="button__label">
                                            {% trans "Создать бейдж" %}
                                        </span>
                                    </button>
                                </div>
                                <div class="c">
                                    <a href="{% url 'badge' %}" class="button button_size_L button_type_normal button_disable_yes">
                                        <span class="button__label">{% trans "Отмена" %}</span>
                                    </a>
                                </div>
                            </div>
                        </td>
                    </tr>
                </table>
        </form>
        {% if badge %}
            <form action="{% url 'delete_badge' badge.id %}" method="POST" style="margin-top:10px;">
            {% csrf_token %}
            <input  class="button link link_red fz15" type="submit" value="{% trans "badge.delete"%}"/>
            </form>
        {% endif %}
</td>
</tr></table>
        </td>
    </tr>
</table>
{% endblock %}
