{% extends 'default/layout.html.twig' %}
{% block title %}{{ 'User'|trans }} #{{ user.id }} - {{ name }}{% endblock %}
{% block main_content %}
    <div class="padding-24-px margin-y-8-px border-radius-3-px background-color-night">
        <div class="margin-b-16-px text-center">
            <img class="border-radius-50 border-color-default border-width-2-px" src="{{ user.identicon }}" alt="{{ 'identicon'|trans }}" />
        </div>
        {# @TODO username feature
        <div class="margin-b-16-px">
            <h1 class="display-block text-center margin-b-16-px">
                {{ 'User'|trans }} #{{ user.id }}
            </h1>
        </div>
        #}
        <div class="text-center">
            <a class="margin-l-8-px margin-r-4-px" href="{{ path('user_star_toggle', {userId : user.id}) }}" title="{{ 'Bookmark' | trans }}">
                {% if user.star.exist %}
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                    </svg>
                {% else %}
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z"/>
                    </svg>
                {% endif %}
            </a>
            <sup class="cursor-default" title="{{ 'Total' | trans }}">
                {{ user.star.total }}
            </sup>
        </div>
        <table class="width-100">
            <tbody>
                <tr>
                    <td class="padding-y-8-px border-bottom-default text-right" colspan="2">{{ 'Common'|trans }}</td>
                </tr>
                <tr>
                    <td class="padding-t-16-px">{{ 'Joined'|trans }}</td>
                    <td class="padding-t-16-px">{{ user.added | format_ago }}</td>
                </tr>
                <tr>
                    <td class="padding-y-8-px border-bottom-default text-right" colspan="2">{{ 'Access'|trans }}</td>
                </tr>
                <tr>
                    <td class="padding-t-16-px">
                        {{ 'Status' | trans }}
                    </td>
                    <td class="padding-t-16-px">
                        {% if user.status %}
                            {{ 'Active' | trans }}
                            {% if user.moderator %}
                                <a class="float-right" href="{{ path('user_status_toggle', { userId : user.id }) }}" title="{{ 'Toggle' | trans }}">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M5 3a5 5 0 0 0 0 10h6a5 5 0 0 0 0-10H5zm6 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"/>
                                    </svg>
                                </a>
                            {% endif %}
                        {% else %}
                            {{ 'Disabled' | trans }}
                            {% if user.moderator %}
                                <a class="float-right text-color-red" href="{{ path('user_status_toggle', { userId : user.id }) }}" title="{{ 'Toggle' | trans }}">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M11 4a4 4 0 0 1 0 8H8a4.992 4.992 0 0 0 2-4 4.992 4.992 0 0 0-2-4h3zm-6 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM0 8a5 5 0 0 0 5 5h6a5 5 0 0 0 0-10H5a5 5 0 0 0-5 5z"/>
                                    </svg>
                                </a>
                            {% endif %}
                        {% endif %}
                    </td>
                </tr>
                <tr>
                    <td>
                        {{ 'Approved' | trans }}
                    </td>
                    <td>
                        {% if user.approved %}
                            {{ 'Yes'| trans }}
                            {% if user.moderator %}
                                <a class="float-right" href="{{ path('user_approved_toggle', { userId : user.id }) }}" title="{{ 'Toggle' | trans }}">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M5 3a5 5 0 0 0 0 10h6a5 5 0 0 0 0-10H5zm6 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"/>
                                    </svg>
                                </a>
                            {% endif %}
                        {% else %}
                            {{ 'No'| trans }}
                            {% if user.moderator %}
                                <a class="float-right text-color-red" href="{{ path('user_approved_toggle', { userId : user.id }) }}" title="{{ 'Toggle' | trans }}">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M11 4a4 4 0 0 1 0 8H8a4.992 4.992 0 0 0 2-4 4.992 4.992 0 0 0-2-4h3zm-6 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM0 8a5 5 0 0 0 5 5h6a5 5 0 0 0 0-10H5a5 5 0 0 0-5 5z"/>
                                    </svg>
                                </a>
                            {% endif %}
                        {% endif %}
                    </td>
                </tr>
                <tr>
                    <td>
                        {{ 'Moderator' | trans }}
                    </td>
                    <td>
                        {% if user.moderator %}
                            {{ 'Yes'| trans }}
                            {% if user.moderator %}
                                <a class="float-right" href="{{ path('user_moderator_toggle', { userId : user.id }) }}" title="{{ 'Toggle' | trans }}">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M5 3a5 5 0 0 0 0 10h6a5 5 0 0 0 0-10H5zm6 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"/>
                                    </svg>
                                </a>
                            {% endif %}
                        {% else %}
                            {{ 'No'| trans }}
                            {% if user.moderator %}
                                <a class="float-right text-color-red" href="{{ path('user_moderator_toggle', { userId : user.id }) }}" title="{{ 'Toggle' | trans }}">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M11 4a4 4 0 0 1 0 8H8a4.992 4.992 0 0 0 2-4 4.992 4.992 0 0 0-2-4h3zm-6 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM0 8a5 5 0 0 0 5 5h6a5 5 0 0 0 0-10H5a5 5 0 0 0-5 5z"/>
                                    </svg>
                                </a>
                            {% endif %}
                        {% endif %}
                    </td>
                </tr>
                <tr>
                    <td class="padding-y-8-px border-bottom-default text-right" colspan="2">
                        {% if user.owner %}
                            <a class="margin-r-4-px{#opacity-0 parent-hover-opacity-09#}" href="{{ path('user_profile', { userId : user.id }) }}" title="{{'Edit'|trans }}">
                                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" viewBox="0 0 16 16">
                                    <path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z"/>
                                </svg>
                            </a>
                        {% endif %}
                        {{ 'Settings' | trans }}
                    </td>
                </tr>
                <tr>
                    <td class="padding-t-16-px">
                        {{ 'Interface' | trans }}
                    </td>
                    <td class="padding-t-16-px">
                        {{ user.locale | locale_name(user.locale) | u.title }}
                    </td>
                </tr>
                <tr>
                    <td class="width-20">{{ 'Content'|trans }}</td>
                    <td class="width-80 line-height-20-px">
                        {% for i, locale in user.locales %}{% if i > 0 %},{% endif %} {{ locale|locale_name(locale)|u.title }}{% endfor %}
                        {#
                        {% for locale in user.locales %}
                            <div class="padding-y-4-px">
                                {{ locale|locale_name(locale)|u.title }}
                            </div>
                        {% endfor %}
                        #}
                    </td>
                </tr>
                <tr>
                    <td>{{ 'Theme'|trans }}</td>
                    <td>{{ user.theme | u.title }}</td>
                </tr>
                <tr>
                    <td>{{ 'Sensitive'|trans }}</td>
                    <td>
                    {% if user.sensitive %}
                        {{ 'Yes'|trans }}
                    {% else %}
                        {{ 'No'|trans }}
                    {% endif %}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
{% endblock %}