{% extends "base.html.twig" %}

{% block ExtraCSSFiles %}
    <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
    <script>
		WebFont.load( {
			google: {
				"families": [ "Poppins:300,400,500,600,700", "Roboto:300,400,500,600,700" ]
			},
			active: function() {
				sessionStorage.fonts = true;
			}
		} );
    </script>
    <link href="{{ asset('/css/database_table.css') }}" rel="stylesheet" type="text/css" />
{% endblock %}

{% block MainContent %}

    <!-- begin:: Page -->

    <!-- begin:: Header Mobile -->

    <!-- end:: Header Mobile -->
    <div class="kt-content  kt-grid__item kt-grid__item--fluid" id="kt_content">

        <!--Begin::Dashboard 1-->

        <!--Begin::Section-->

        <!--End::Section-->

        <!--Begin::Section-->
        <div class="row">
            <div class="col-xl-12">
                <div class="kt-portlet kt-portlet--height-fluid kt-portlet--mobile ">
                    <div class="kt-portlet__body kt-portlet__body--fit">

                        <!--begin: Datatable -->
                        <div class="kt-datatable" id="kt_datatable_latest_orders">
                            <table class="kt-datatable__table"
                                   style="display: block; min-height: 500px; max-height: 2000px;">
                                <thead class="kt-datatable__head">
                                <tr class="kt-datatable__row" style="left: 0px;">
                                    <th class="kt-datatable__cell kt-datatable__toggle-detail"><span></span></th>
                                    <th data-field="name" data-autohide-disabled="false" class="kt-datatable__cell kt-datatable__cell--sort"><span style="width: 240px;">Name</span>
                                    </th>
                                    <th data-field="is_active" class="kt-datatable__cell kt-datatable__cell--sort kt-is_active"><span style="width: 100px;">Active</span></th>
                                    <th data-field="admission_number" class="kt-datatable__cell kt-datatable__cell--sort kt-admission_number"><span style="width: 100px;">Reg. Number</span></th>
                                    <th data-field="gender" class="kt-datatable__cell kt-datatable__cell--sort kt-gender-item"><span style="width: 100px;">Gender</span></th>
                                    <th data-field="register_time" class="kt-datatable__cell kt-datatable__cell--sort kt-register-time-date"><span style="width: 100px;">DOR</span></th>
                                    <th data-field="Actions" data-autohide-disabled="false"
                                        class="kt-datatable__cell kt-datatable__cell--sort"><span style="width: 80px;">Actions</span>
                                    </th>
                                </tr>
                                </thead>
                                <tbody class="kt-datatable__body ps" style="max-height: 1947px;">
                                <tr data-row="0" class="kt-datatable__row" style="left: 0px;">
                                    <td class="kt-datatable__cell kt-datatable__toggle-detail">
                                        <a id="test-1" class="kt-datatable__toggle-detail" href="">
                                            <i class="fa fa-caret-right"></i></a></td>
                                    <td data-field="name" data-autohide-disabled="false" class="kt-datatable__cell">
                                        <span style="width: 240px;">                        <div
                                                    class="kt-user-card-v2">                            <div
                                                        class="kt-user-card-v2__pic">                                <img
                                                            alt="photo"
                                                            src="https://keenthemes.com/metronic/preview/assets/media/client-logos/logo1.png">                            </div>                            <div
                                                        class="kt-user-card-v2__details">                                <a
                                                            class="kt-user-card-v2__name" href="user/profile/1">Sulaman Khan</a>                                <span
                                                            class="kt-user-card-v2__email">sulaman@sulaman.pk</span>                            </div>                        </div></span>
                                    </td>
                                    <td data-field="is_active" class="kt-datatable__cell kt-is_active"><span
                                                style="width: 100px;"><span
                                                    class="btn btn-bold btn-sm btn-font-sm btn-label-success"> Active </span></span>
                                    </td>
                                    <td data-field="admission_number" class="kt-datatable__cell kt-admission_number">
                                        <span style="width: 100px;"><span class="kt-font-bold">1</span></span></td>
                                    <td data-field="gender" class="kt-datatable__cell kt-gender-item"><span
                                                style="width: 100px;"><span class="kt-font-bold"> <div
                                                        class="kt-demo-icon__preview"><i
                                                            class="fa fa-female size-20px"></i></div></span></span></td>
                                    <td data-field="register_time" class="kt-datatable__cell kt-register-time-date">
                                        <span style="width: 100px;"><span class="kt-font-bold">24, Jun 19</span></span>
                                    </td>
                                    <td data-field="Actions" data-autohide-disabled="false" class="kt-datatable__cell">
                                        <span style="overflow: visible; position: relative; width: 80px;">                        <div
                                                    class="dropdown">                            <a
                                                        data-toggle="dropdown"
                                                        class="btn btn-sm btn-clean btn-icon btn-icon-md">                                <i
                                                            class="flaticon-more-1"></i>                            </a>                            <div
                                                        class="dropdown-menu dropdown-menu-right">                                <ul
                                                            class="kt-nav">                                    <li
                                                                class="kt-nav__item">                                        <a
                                                                    class="kt-nav__link" href="#">                                            <i
                                                                        class="kt-nav__link-icon flaticon2-expand"></i>                                            <span
                                                                        class="kt-nav__link-text">View</span>                                        </a>                                    </li>                                                                        <li
                                                                class="kt-nav__item">                                        <a
                                                                    class="kt-nav__link" href="#">                                            <i
                                                                        class="kt-nav__link-icon flaticon2-trash"></i>                                            <span
                                                                        class="kt-nav__link-text">Delete</span>                                        </a>                                    </li>                                                                    </ul>                            </div>                        </div>                    </span>
                                    </td>
                                </tr>
                                <tr id="datatable-detail-1" class="kt-datatable__row-detail">
                                    <td class="kt-datatable__detail" colspan="7">
                                        <table>
                                            <tr class="kt-datatable__row kt-mobile-active kt-mobile">
                                                <td class="kt-datatable__cell"><span>Active</span></td>
                                                <td data-field="is_active" class="kt-datatable__cell" style=""><span
                                                            style="width: 100px;"><span
                                                                class="btn btn-bold btn-sm btn-font-sm btn-label-success"> Active </span></span>
                                                </td>
                                            </tr>
                                            <tr class="kt-datatable__row kt-mobile-add-number kt-mobile">
                                                <td class="kt-datatable__cell"><span>Reg. Number</span></td>
                                                <td data-field="admission_number" class="kt-datatable__cell" style="">
                                                    <span style="width: 100px;"><span
                                                                class="kt-font-bold">1</span></span></td>
                                            </tr>
                                            <tr class="kt-datatable__row kt-mobile-gender kt-mobile">
                                                <td class="kt-datatable__cell"><span>Gender</span></td>
                                                <td data-field="gender" class="kt-datatable__cell" style=""><span
                                                            style="width: 100px;"><span class="kt-font-bold"> <div
                                                                    class="kt-demo-icon__preview"><i
                                                                        class="fa fa-female size-20px"></i></div></span></span>
                                                </td>
                                            </tr>
                                            <tr class="kt-datatable__row ">
                                                <td class="kt-datatable__cell"><span>DOR</span></td>
                                                <td data-field="register_time" class="kt-datatable__cell" style=""><span
                                                            style="width: 100px;"><span
                                                                class="kt-font-bold">24, Jun 19</span></span></td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                                <tr data-row="0" class="kt-datatable__row" style="left: 0px;">
                                    <td class="kt-datatable__cell kt-datatable__toggle-detail">
                                        <a id="test-2" class="kt-datatable__toggle-detail" href="">
                                            <i class="fa fa-caret-right"></i></a></td>
                                    <td data-field="name" data-autohide-disabled="false" class="kt-datatable__cell">
                                        <span style="width: 240px;">                        <div
                                                    class="kt-user-card-v2">                            <div
                                                        class="kt-user-card-v2__pic">                                <img
                                                            alt="photo"
                                                            src="https://keenthemes.com/metronic/preview/assets/media/client-logos/logo1.png">                            </div>                            <div
                                                        class="kt-user-card-v2__details">                                <a
                                                            class="kt-user-card-v2__name" href="user/profile/1">Sulaman Khan</a>                                <span
                                                            class="kt-user-card-v2__email">sulaman@sulaman.pk</span>                            </div>                        </div></span>
                                    </td>
                                    <td data-field="is_active" class="kt-datatable__cell kt-is_active"><span
                                                style="width: 100px;"><span
                                                    class="btn btn-bold btn-sm btn-font-sm btn-label-success"> Active </span></span>
                                    </td>
                                    <td data-field="admission_number" class="kt-datatable__cell kt-admission_number">
                                        <span style="width: 100px;"><span class="kt-font-bold">1</span></span></td>
                                    <td data-field="gender" class="kt-datatable__cell kt-gender-item"><span
                                                style="width: 100px;"><span class="kt-font-bold"> <div
                                                        class="kt-demo-icon__preview"><i
                                                            class="fa fa-female size-20px"></i></div></span></span></td>
                                    <td data-field="register_time" class="kt-datatable__cell kt-register-time-date">
                                        <span style="width: 100px;"><span class="kt-font-bold">24, Jun 19</span></span>
                                    </td>
                                    <td data-field="Actions" data-autohide-disabled="false" class="kt-datatable__cell">
                                        <span style="overflow: visible; position: relative; width: 80px;">                        <div
                                                    class="dropdown">                            <a
                                                        data-toggle="dropdown"
                                                        class="btn btn-sm btn-clean btn-icon btn-icon-md">                                <i
                                                            class="flaticon-more-1"></i>                            </a>                            <div
                                                        class="dropdown-menu dropdown-menu-right">                                <ul
                                                            class="kt-nav">                                    <li
                                                                class="kt-nav__item">                                        <a
                                                                    class="kt-nav__link" href="#">                                            <i
                                                                        class="kt-nav__link-icon flaticon2-expand"></i>                                            <span
                                                                        class="kt-nav__link-text">View</span>                                        </a>                                    </li>                                                                        <li
                                                                class="kt-nav__item">                                        <a
                                                                    class="kt-nav__link" href="#">                                            <i
                                                                        class="kt-nav__link-icon flaticon2-trash"></i>                                            <span
                                                                        class="kt-nav__link-text">Delete</span>                                        </a>                                    </li>                                                                    </ul>                            </div>                        </div>                    </span>
                                    </td>
                                </tr>
                                <tr id="datatable-detail-2" class="kt-datatable__row-detail">
                                    <td class="kt-datatable__detail" colspan="7">
                                        <table>
                                            <tr class="kt-datatable__row kt-mobile-active kt-mobile">
                                                <td class="kt-datatable__cell"><span>Active</span></td>
                                                <td data-field="is_active" class="kt-datatable__cell" style=""><span
                                                            style="width: 100px;"><span
                                                                class="btn btn-bold btn-sm btn-font-sm btn-label-success"> Active </span></span>
                                                </td>
                                            </tr>
                                            <tr class="kt-datatable__row kt-mobile-add-number kt-mobile">
                                                <td class="kt-datatable__cell"><span>Reg. Number</span></td>
                                                <td data-field="admission_number" class="kt-datatable__cell" style="">
                                                    <span style="width: 100px;"><span
                                                                class="kt-font-bold">1</span></span></td>
                                            </tr>
                                            <tr class="kt-datatable__row kt-mobile-gender kt-mobile">
                                                <td class="kt-datatable__cell"><span>Gender</span></td>
                                                <td data-field="gender" class="kt-datatable__cell" style=""><span
                                                            style="width: 100px;"><span class="kt-font-bold"> <div
                                                                    class="kt-demo-icon__preview"><i
                                                                        class="fa fa-female size-20px"></i></div></span></span>
                                                </td>
                                            </tr>
                                            <tr class="kt-datatable__row ">
                                                <td class="kt-datatable__cell"><span>DOR</span></td>
                                                <td data-field="register_time" class="kt-datatable__cell" style=""><span
                                                            style="width: 100px;"><span
                                                                class="kt-font-bold">24, Jun 19</span></span></td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                            <div class="kt-datatable__pager kt-datatable--paging-loaded">
                                <ul class="kt-datatable__pager-nav">
                                    <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>
                                    <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>
                                    <li><a class="kt-datatable__pager-link kt-datatable__pager-link-number"
                                           data-page="2" title="2">2</a></li>
                                    <li><a class="kt-datatable__pager-link kt-datatable__pager-link-number"
                                           data-page="3" title="3">3</a></li>
                                    <li><a class="kt-datatable__pager-link kt-datatable__pager-link-number"
                                           data-page="4" title="4">4</a></li>
                                    <li><a class="kt-datatable__pager-link kt-datatable__pager-link-number"
                                           data-page="5" title="5">5</a></li>
                                    <li></li>
                                    <li><a title="Next" class="kt-datatable__pager-link kt-datatable__pager-link--next"
                                           data-page="2"><i class="flaticon2-next"></i></a></li>
                                    <li><a title="Last" class="kt-datatable__pager-link kt-datatable__pager-link--last"
                                           data-page="35"><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="Select page size" data-width="60px"
                                                                      data-selected="10" tabindex="-98">
                                            <option class="bs-title-option" value=""></option>
                                            <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>
                                        <button type="button" class="btn dropdown-toggle btn-light"
                                                data-toggle="dropdown" role="button" title="Select page size">
                                            <div class="filter-option">
                                                <div class="filter-option-inner">
                                                    <div class="filter-option-inner-inner">10</div>
                                                </div>
                                            </div>
                                        </button>
                                        <div class="dropdown-menu " role="combobox">
                                            <div class="inner show" role="listbox" aria-expanded="false" tabindex="-1">
                                                <ul class="dropdown-menu inner show"></ul>
                                            </div>
                                        </div>
                                    </div>
                                    <span class="kt-datatable__pager-detail">Showing 1 - 10 of 350</span></div>
                            </div>
                        </div>
                        <!--end: Datatable -->
                    </div>
                </div>
            </div>
        </div>

        <!--End::Section-->

        <!--End::Dashboard 1-->
    </div>
{% endblock %}

{% block ExtraJsFIles %}
    <script src="{{ asset('js/database_table.js') }}" type="text/javascript"></script>
{% endblock %}