{% extends "admin/partial/layout_logged_in.html.twig" %}

{% block title %}{{ ta('account_login_history', 'Account Login History') }}{% endblock %}
{% block selected_page %}users{% endblock %}
{% block selected_sub_page %}user_manage{% endblock %}

{% block body %}
<script>
    oTable = null;
    gPluginId = null;
    $(document).ready(function(){
        // datatable
        oTable = $('#userLoginsTable').dataTable($.extend(dataTableOpts, {
            "bServerSide": false,
            "iDisplayLength": 50,
            "bLengthChange": false,
            "aaSorting": [[ 0, "desc" ]],
            'oLanguage': $.extend(dataTableOpts.oLanguage, {
                'sEmptyTable': {{ ta('there_are_no_logins_in_the_current_filters', 'There are no logins in the current filters.')|json_encode()|raw }}
            })
        }));
    });
</script>

<!-- page content -->
<div class="right_col" role="main">
    <div class="">
        <div class="page-title">
            <div class="title_left">
                <h3>{{ block('title') }}</h3>
            </div>
        </div>
        <div class="clearfix"></div>

        {{ msg_page_notifications|raw }}
        
        <div class="row">
            <div class="col-md-3 col-sm-3 col-xs-12">
                <div class="x_panel">
                    <div class="x_title">
                        <h2>{{ ta('account_logins', 'Account Logins') }}</h2>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        <p>{{ ta('details_of_any_successful_account_logins_for_the_past_30_days', 'Details of any successful account logins for the past 30 days, the IP address and which country it was from.') }}</p>
                        <table class="countries_list">
                            <tr><td><i class="fa fa-lock"></i>{{ ta('total_logins', 'Total Logins') }}:</td><td class="fs15 fw700 text-right">{{ loginData|length }}</td></tr>
                            <tr><td><i class="fa fa-share-alt"></i>{{ ta('different_ips', 'Different IPs') }}:</td><td class="fs15 fw700 text-right">{{ totalDifferentIps }}</td></tr>
                            <tr><td><i class="fa fa-globe"></i>{{ ta('different_countries', 'Different Countries') }}:</td><td class="fs15 fw700 text-right">{{ totalDifferentCountries }}</td></tr>
                        </table>
                    </div>
                </div>
            </div>
            
            <div class="col-md-9 col-sm-9 col-xs-12">
                <div class="x_panel">
                    <div class="x_content">
                        <table id="userLoginsTable" class="table table-striped table-only-border bulk_action">
                            <thead>
                                <tr>
                                    <th class='align-left'>{{ ta('login_date', 'Login Date') }}</th>
                                    <th class='align-left'>{{ ta('ip_address', 'IP Address') }}</th>
                                    <th class='align-left'>{{ ta('country', 'Country') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% if loginData|length == 0 %}
                                    <tr><td>{{ ta('no_logins_for_the_past_30_days', 'No logins in the past 30 days.') }}</td><td></td><td></td></tr>
                                {% else %}
                                    {% for loginDataItem in loginData %}
                                    <tr>
                                        <td>{{ CoreHelper.formatDate(loginDataItem['date_added'], SITE_CONFIG_DATE_TIME_FORMAT) }}</td>
                                        <td>{{ loginDataItem['ip_address'] }}</td>
                                        <td>{{ loginDataItem['country_name']|length?loginDataItem['country_name']:'Unknown' }}</td>
                                    </tr>
                                    {% endfor %}
                                {% endif %}
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="x_panel">
                    <div class="btn-group">
                        <div class="dropup">
                            <a href="user_manage" class="btn btn-default dropdown-toggle" type="button">
                                {{ ta('return_to_manage_users', 'Return to Manage Users') }}
                            </a>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
{% endblock %}