{% extends 'default/layout.html.twig' %}
{% block title %}{{ 'Settings' | trans }} - {{ name }}{% endblock %}
{% block main_content %}
    <div class="padding-24-px margin-y-8-px border-radius-3-px background-color-night">
        <form name="profile" action="{{ path('user_settings') }}" method="post">
            <h1>{{ 'Settings' | trans }} </h1>
            <table class="width-100">
                <tbody>
                    <tr>
                        <td class="padding-b-8-px border-bottom-default text-right" colspan="2">
                            {{ 'Interface' | trans }}
                        </td>
                    </tr>
                    <tr>
                        <td class="padding-t-16-px min-width-200-px">
                            {{ 'Theme' | trans }}
                        </td>
                        <td class="padding-t-16-px">
                            <select name="theme">
                                {% for theme in themes %}
                                    {% if theme == user.theme %}
                                        <option value="{{ theme }}" selected="selected">
                                            {{ theme | u.title }}
                                        </option>
                                    {% else %}
                                        <option value="{{ theme }}">
                                            {{ theme | u.title }}
                                        </option>
                                    {% endif %}
                                {% endfor %}
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="padding-t-16-px">{{ 'Language' | trans }}</td>
                        <td class="padding-t-16-px">
                            <select name="locale">
                                {% for locale in locales %}
                                    {% if locale == user.locale %}
                                        <option value="{{ locale }}" selected="selected">
                                            {{ locale | locale_name(locale) | u.title }}
                                        </option>
                                    {% else %}
                                        <option value="{{ locale }}">
                                            {{ locale | locale_name(locale) | u.title }}
                                        </option>
                                    {% endif %}
                                {% endfor %}
                            </select>
                            <div class="margin-x-8-px display-inline-block">
                                <a href="https://crowdin.com/project/yggtracker" target="_blank">
                                    <small>{{ 'Join translation' | trans }}</small>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" fill="currentColor" viewBox="0 0 16 16">
                                        <path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/>
                                        <path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/>
                                    </svg>
                                </a>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="padding-y-12-px">
                            {{ 'Posters' | trans }}
                        </td>
                        <td class="padding-y-12-px">
                            <div class="margin-r-8-px">
                                {% if user.posters %}
                                    <input name="posters" id="posters" type="checkbox" value="true" checked="checked" />
                                {% else %}
                                    <input name="posters" id="posters" type="checkbox" value="true" />
                                {% endif %}
                                <label class="margin-x-4-px" for="posters">
                                    {{ 'Enabled' | trans }}
                                </label>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="padding-b-8-px border-bottom-default text-right" colspan="2">
                            {{ 'Search' | trans }}
                        </td>
                    </tr>
                    <tr>
                        <td class="padding-t-16-px">
                            <div class="margin-t-4-px">
                                {{ 'Locales' | trans }}
                            </div>
                        </td>
                        <td class="padding-t-16-px padding-b-8-px">
                            {% for locale in locales | sort %}
                                <div class="margin-t-4-px margin-b-8-px margin-r-8-px display-inline-block min-width-120-px">
                                    {% if locale in user.locales %}
                                        <input name="locales[]" id="{{ locale }}" type="checkbox" value="{{ locale }}" checked="checked" />
                                    {% else %}
                                        <input name="locales[]" id="{{ locale }}" type="checkbox" value="{{ locale }}" />
                                    {% endif %}
                                    <label class="margin-x-4-px" for="{{ locale }}">
                                        {{ locale | locale_name(locale) | u.title }}
                                    </label>
                                </div>
                            {% endfor %}
                        </td>
                    </tr>
                    <tr>
                        <td class="padding-y-16-px">
                            <div class="margin-t-4-px">
                                {{ 'Categories' | trans }}
                            </div>
                        </td>
                        <td class="padding-t-16-px padding-b-8-px border-top-default">
                            {% for category in categories | sort %}
                                <div class="margin-t-4-px margin-b-8-px margin-r-8-px display-inline-block min-width-120-px">
                                    {% if category in user.categories %}
                                        <input name="categories[]" id="{{ category }}" type="checkbox" value="{{ category }}" checked="checked" />
                                    {% else %}
                                        <input name="categories[]" id="{{ category }}" type="checkbox" value="{{ category }}" />
                                    {% endif %}
                                    <label class="margin-x-4-px" for="{{ category }}">
                                        {{ category | trans_category | u.title }}
                                    </label>
                                </div>
                            {% endfor %}
                        </td>
                    </tr>
                    <tr>
                        <td class="padding-y-16-px">
                            {{ 'Sensitive' | trans }}
                        </td>
                        <td class="padding-t-16-px padding-b-8-px border-top-default">
                            <div class="margin-r-8-px">
                                {% if user.sensitive %}
                                    <input name="sensitive" id="sensitive" type="checkbox" value="true" checked="checked" />
                                {% else %}
                                    <input name="sensitive" id="sensitive" type="checkbox" value="true" />
                                {% endif %}
                                <label class="margin-x-4-px" for="sensitive">
                                    {{ 'Hide' | trans }}
                                </label>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="padding-b-8-px border-bottom-default text-right" colspan="2">
                            {{ 'Activity' | trans }}
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2"></td>
                    </tr>
                    {% set i = 0 %}
                    {% for group, event in events %}
                        {% set i = i + 1 %}
                        <tr>
                            <td class="padding-y-12-px">
                                {{ group }}
                            </td>
                            <td class="padding-t-8-px {% if i > 1 %}border-top-default{% endif %}">
                                {% for key, value in event %}
                                    <span class="margin-t-4-px margin-b-8-px margin-r-8-px display-inline-block min-width-120-px">
                                        {% if value in user.events %}
                                            <input name="events[]" id="event-{{ value }}" type="checkbox" value="{{ value }}" checked="checked" />
                                        {% else %}
                                            <input name="events[]" id="event-{{ value }}" type="checkbox" value="{{ value }}" />
                                        {% endif %}
                                        <label class="margin-x-4-px" for="event-{{ value }}">
                                            {{ key }}
                                        </label>
                                    </span>
                                {% endfor %}
                            </td>
                        </tr>
                    {% endfor %}
                    <tr>
                        <td class="padding-b-8-px border-bottom-default text-right" colspan="2">
                            {{ 'Downloads' | trans }}
                        </td>
                    </tr>
                    <tr>
                        <td class="padding-y-16-px">
                            {{ 'Yggdrasil only' | trans }}
                        </td>
                        <td class="padding-y-16-px">
                            {% if user.yggdrasil %}
                                <input name="yggdrasil" id="yggdrasil" type="checkbox" value="true" checked="checked" />
                            {% else %}
                                <input name="yggdrasil" id="yggdrasil" type="checkbox" value="true" />
                            {% endif %}
                            <label class="margin-x-4-px" for="yggdrasil">
                                {{ 'Enabled' | trans }}
                            </label>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="text-right">
                <input class="button-green" type="submit" value="{{ 'Save' | trans }}" />
            </div>
        </form>
    </div>
{% endblock %}