{% include 'common/header.html.twig' with {'assets': assets } %}
<!-- begin::Body -->
<body style="background-image: url({{ assets }}media/demos/demo4/header-bg-1920x450.png); background-position: center top; background-size: 100% 450px;" class="kt-page--loading-enabled kt-page--loading kt-quick-panel--right kt-demo-panel--right kt-offcanvas-panel--right kt-header--fixed kt-header--minimize-menu kt-header-mobile--fixed kt-subheader--enabled kt-subheader--transparent kt-page--loading">

<!-- begin:: Page -->

<!-- begin:: Header Mobile -->
{% include 'common/header_mobile.html.twig' %}

<!-- end:: Header Mobile -->
<div class="kt-grid kt-grid--hor kt-grid--root">
    <div class="kt-grid__item kt-grid__item--fluid kt-grid kt-grid--ver kt-page">
        <div class="kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor kt-wrapper" id="kt_wrapper">

            <!-- begin:: Header -->
            {{ render(controller('App\\Controller\\Common\\Top::index')) }}
            <!-- end:: Header -->

            <div class="kt-body kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor kt-grid--stretch" id="kt_body">
                <div class="kt-content kt-content--fit-top  kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor" id="kt_content">

                    <!-- begin:: Subheader -->
                    {% include 'common/subheader.html.twig' %}

                    <!-- end:: Subheader -->

                    <!-- begin:: Content -->
                    <div class="kt-container  kt-grid__item kt-grid__item--fluid">

                        <!--begin::Portlet-->
                        <div class="kt-portlet kt-portlet--mobile">

                            <div class="kt-portlet__head kt-portlet__head--lg">
                                <div class="kt-portlet__head-label">
											<span class="kt-portlet__head-icon">
												<i class="kt-font-brand flaticon2-line-chart"></i>
											</span>
                                    <h3 class="kt-portlet__head-title">
                                        Merchants
                                        <small>A list of all merchants</small>
                                    </h3>
                                </div>
                                <div class="kt-portlet__head-toolbar">
                                    <div class="kt-portlet__head-wrapper">
                                        <div class="kt-portlet__head-actions">
                                            <div class="dropdown dropdown-inline">
                                                <button type="button" class="btn btn-default btn-icon-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <i class="la la-download"></i> Export
                                                </button>
                                                <div class="dropdown-menu dropdown-menu-right">
                                                    <ul class="kt-nav">
                                                        <li class="kt-nav__section kt-nav__section--first">
                                                            <span class="kt-nav__section-text">Choose an option</span>
                                                        </li>
                                                        <li class="kt-nav__item">
                                                            <a href="#" class="kt-nav__link">
                                                                <i class="kt-nav__link-icon la la-print"></i>
                                                                <span class="kt-nav__link-text">Print</span>
                                                            </a>
                                                        </li>
                                                        <li class="kt-nav__item">
                                                            <a href="#" class="kt-nav__link">
                                                                <i class="kt-nav__link-icon la la-copy"></i>
                                                                <span class="kt-nav__link-text">Copy</span>
                                                            </a>
                                                        </li>
                                                        <li class="kt-nav__item">
                                                            <a href="#" class="kt-nav__link">
                                                                <i class="kt-nav__link-icon la la-file-excel-o"></i>
                                                                <span class="kt-nav__link-text">Excel</span>
                                                            </a>
                                                        </li>
                                                        <li class="kt-nav__item">
                                                            <a href="#" class="kt-nav__link">
                                                                <i class="kt-nav__link-icon la la-file-text-o"></i>
                                                                <span class="kt-nav__link-text">CSV</span>
                                                            </a>
                                                        </li>
                                                        <li class="kt-nav__item">
                                                            <a href="#" class="kt-nav__link">
                                                                <i class="kt-nav__link-icon la la-file-pdf-o"></i>
                                                                <span class="kt-nav__link-text">PDF</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="kt-portlet__body kt-portlet__body--fit">

                                <!--begin: Datatable -->
                                    <div class="kt-datatable kt-datatable--default kt-datatable--brand kt-datatable--loaded">
                                        <table class="kt-datatable__table" id="html_table" width="100%" style="display:block;">
                                            <thead class="kt-datatable__head">
                                            <tr class="kt-datatable__row">
                                                <th class="kt-datatable__cell kt-datatable__cell--sort"><span style="width: 148px;">Merchant Code</span></th>
                                                <th class="kt-datatable__cell kt-datatable__cell--sort"><span style="width: 148px;">Registration Date</span></th>
                                                <th class="kt-datatable__cell kt-datatable__cell--sort"><span style="width: 148px;">Company Name</span></th>
                                                <th class="kt-datatable__cell kt-datatable__cell--sort"><span style="width: 148px;">Country</span></th>
                                                <th class="kt-datatable__cell kt-datatable__cell--sort"><span style="width: 148px;">Name</span></th>
                                            </tr>
                                            </thead>
                                            <tbody class="kt-datatable__body">
                                            {% for merchant in merchants %}
                                                <tr class="kt-datatable__row" style="left:0px;">
                                                    <td class="kt-datatable__cell"><span style="width: 148px;"><a href="{{ merchant.url }}" style="color: #5867dd;">{{ merchant.code }}</a></span></td>
                                                    <td class="kt-datatable__cell"><span style="width: 148px;">{{ merchant.reg_date }}</span></td>
                                                    <td class="kt-datatable__cell"><span style="width: 148px;">{{ merchant.company }}</span></td>
                                                    <td class="kt-datatable__cell"><span style="width: 148px;">{{ merchant.country_title }}</span></td>
                                                    <td class="kt-datatable__cell"><span style="width: 148px;">{{ merchant.lname }} {{ merchant.fname }}</span></td>
                                                </tr>
                                            {% endfor %}
                                            </tbody>
                                    </table>
                                    <div class="kt-datatable__pager kt-datatable--paging-loaded">
                                        <ul class="kt-datatable__pager-nav" style="display: none;">
                                            <li><a title="First"
                                                   class="kt-datatable__pager-link kt-datatable__pager-link--first kt-datatable__pager-link--disabled"
                                                   data-page="1" disabled="disabled">
                                                    <i class="flaticon2-fast-back"></i>
                                                </a>
                                            </li>
                                            <li><a title="Previous"
                                                   class="kt-datatable__pager-link kt-datatable__pager-link--prev kt-datatable__pager-link--disabled"
                                                   data-page="1" disabled="disabled"><i class="flaticon2-back"></i>
                                                </a>
                                            </li>
                                            <li style=""></li>
                                            <li style="display: none;">
                                                <input type="text" class="kt-pager-input form-control" title="Page number">
                                            </li>

                                            {% for i in total_pages %}
                                                {% if i > 0 and i == 1 %}
                                                    <li>
                                                        <a class="kt-datatable__pager-link kt-datatable__pager-link-number kt-datatable__pager-link--active"
                                                           data-page="1" title="1">1</a>
                                                    </li>
                                                {% elseif i > 0 and i > 1 %}
                                                    <li><a class="kt-datatable__pager-link kt-datatable__pager-link-number" data-page="2" title="2">2</a></li>
                                                {% endif %}
                                            {% endfor %}
                                            <li style=""></li>
                                            <li>
                                                <a title="Next"
                                                   class="kt-datatable__pager-link kt-datatable__pager-link--next kt-datatable__pager-link--disabled"
                                                   data-page="1" disabled="disabled">
                                                    <i class="flaticon2-next"></i>
                                                </a>
                                            </li>
                                            <li><a title="Last"
                                                   class="kt-datatable__pager-link kt-datatable__pager-link--last kt-datatable__pager-link--disabled"
                                                   data-page="1" disabled="disabled">
                                                    <i class="flaticon2-fast-next"></i></a>
                                            </li>
                                        </ul>
                                        <div class="kt-datatable__pager-info">
                                            <div class="dropdown bootstrap-select kt-datatable__pager-size"
                                                 style="width: 60px;">
                                                <select class="selectpicker kt-datatable__pager-size" title="10" data-width="60px" data-container="body" data-selected="-1" tabindex="-98">
                                                    <option value="10">10</option>
                                                    <option value="20">20</option>
                                                    <option value="30">30</option>
                                                    <option value="50">50</option>
                                                    <option value="100">100</option>
                                                </select>
                                                <div class="dropdown-menu ">
                                                    <div class="inner show" role="listbox" id="bs-select-1"
                                                         tabindex="-1">
                                                        <ul class="dropdown-menu inner show"
                                                            role="presentation"></ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <span class="kt-datatable__pager-detail">Εμφανίζονται {{ current_view_merchants }} από {{ total_merchants }}</span>
                                        </div>
                                    </div>
                               </div>
                                <!--end: Datatable -->
                            </div>
                        </div>

                        <!--end::Portlet-->

                        <!--begin::Modal-->
                        <div class="modal fade" id="kt_datatable_records_fetch_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabel">Selected Records</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true"></span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="kt-scroll" data-scroll="true" data-height="200">
                                            <ul id="kt_apps_user_fetch_records_selected"></ul>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-brand" data-dismiss="modal">Close</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!--end::Modal-->
                    </div>

                    <!-- end:: Content -->
                </div>
                <!--begin::Page Scripts(used by this page) -->
                <script src="{{ assets }}js/pages/custom/user/list-datatable.js" type="text/javascript"></script>

                <!--end::Page Scripts -->
                {{ render(controller('App\\Controller\\Common\\Footer::index')) }}

<!-- end::Body -->
