{% extends '@mio/settings/master.twig' %}

{% block settings_content %}
    <div class="settings__description">
        <p>These are the active logins to your account, clicking the Kill button will force a logout on that session. Your current login is highlighted with a darker purple so you don't accidentally force yourself to logout.</p>
    </div>

    <div class="settings__sessions">
        {% for session in user_sessions %}
            <div class="settings__sessions__entry{% if session.session_id == settings_session.session_id %} settings__sessions__entry--current{% endif %}" id="session-{{ session.session_id }}">
                <div class="settings__sessions__column settings__sessions__column--ip">
                    <div class="settings__sessions__column__name">
                        IP
                    </div>
                    <div class="settings__sessions__column__value">
                        {{ session.session_ip.string }}
                        {% if session.session_country != 'XX' %}
                            <img class="settings__sessions__country" src="https://static.flash.moe/flags/fff/{{ session.session_country|lower }}.png" alt="{{ session.session_country }}" title="{{ session.session_country|country_name }}">
                        {% endif %}
                    </div>
                </div>
                <div class="settings__sessions__column settings__sessions__column--created" onmouseenter="this.children[1].textContent = '{{ session.created_at }}';" onmouseleave="this.children[1].textContent = '{{ session.created_at.diffForHumans }}';">
                    <div class="settings__sessions__column__name">
                        Created
                    </div>
                    <div class="settings__sessions__column__value">
                        {{ session.created_at.diffForHumans }}
                    </div>
                </div>
                <div class="settings__sessions__column settings__sessions__column--expires" onmouseenter="this.children[1].textContent = '{{ session.expires_on }}';" onmouseleave="this.children[1].textContent = '{{ session.expires_on.diffForHumans }}';">
                    <div class="settings__sessions__column__name">
                        Expires
                    </div>
                    <div class="settings__sessions__column__value">
                        {{ session.expires_on.diffForHumans }}
                    </div>
                </div>
                {% if session.user_agent|length > 0 %}
                    <div class="settings__sessions__column settings__sessions__column--user_agent">
                        <div class="settings__sessions__column__name">
                            User Agent
                        </div>
                        <div class="settings__sessions__column__value">
                            {{ session.user_agent }}
                        </div>
                    </div>
                {% endif %}
                <form class="settings__sessions__column settings__sessions__column--options" method="post" action="?m=sessions">
                    <input type="hidden" name="csrf" value="{{ csrf_token() }}">
                    <input type="hidden" name="session" value="{{ session.session_id }}">
                    <button class="input__button settings__sessions__button">Kill</button>
                </form>
            </div>
        {% endfor %}
    </div>
{% endblock %}