{% 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-->
        {#kt-gender-item#}
        <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: 200px;">Name</span>
                                    </th>
                                    <th data-field="is_active" class="kt-datatable__cell kt-datatable__cell--sort kt-register-time-date"><span style="width: 300px;">Description</span></th>
                                    <th data-field="admission_number" class="kt-datatable__cell kt-datatable__cell--sort kt-admission_number"><span style="width: 100px;">Permissions</span></th>
                                    <th data-field="gender" class="kt-datatable__cell kt-datatable__cell--sort kt-is_active"><span style="width: 100px;">Active</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: 200px;">
                                            <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-register-time-date">
                                        <span style="width: 300px;">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
                                    </td>
                                    <td data-field="admission_number" class="kt-datatable__cell kt-admission_number">
                                         <span style="width: 100px;">
                                             <span class="btn btn-bold btn-sm btn-font-sm btn-label-info"> All </span></span>
                                    </td>
                                    <td data-field="gender" class="kt-datatable__cell kt-is_active">
                                         <span style="width: 100px;">
                                          <span class="kt-switch kt-switch--sm kt-switch--icon">
																	<label>
																		<input type="checkbox" checked="checked" name="">
																		<span></span>
																	</label>
																</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;">
                                            <a href="#" class="btn btn-secondary">View</a>
                                        </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 ">
                                                <td class="kt-datatable__cell"><span>Description</span></td>
                                                <td data-field="register_time" class="kt-datatable__cell" style=""><span
                                                            style="width: 100px;"><span
                                                                class="kt-font-bold">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span></span></td>
                                            </tr>
                                            <tr class="kt-datatable__row kt-mobile-add-number kt-mobile">
                                                <td class="kt-datatable__cell"><span>Permissions</span></td>
                                                <td data-field="admission_number" class="kt-datatable__cell" style="">
                                                    <span style="width: 100px;"><span class="btn btn-bold btn-sm btn-font-sm btn-label-info"> All </span></span></td>
                                            </tr>
                                            <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="kt-switch kt-switch--sm kt-switch--icon">
																	<label>
																		<input type="checkbox" checked="checked" name="">
																		<span></span>
																	</label>
																</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>#}
                                        </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: 200px;">
                                            <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-register-time-date">
                                        <span style="width: 300px;">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
                                    </td>
                                    <td data-field="admission_number" class="kt-datatable__cell kt-admission_number">
                                         <span style="width: 100px;">
                                             <span class="btn btn-bold btn-sm btn-font-sm btn-label-info"> All </span></span>
                                    </td>
                                    <td data-field="gender" class="kt-datatable__cell kt-is_active">
                                         <span style="width: 100px;">
                                            <span class="kt-switch kt-switch--sm kt-switch--icon">
																	<label>
																		<input type="checkbox" checked="checked" name="">
																		<span></span>
																	</label>
																</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;">
                                            <a href="#" class="btn btn-secondary">View</a>
                                        </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 ">
                                                <td class="kt-datatable__cell"><span>Description</span></td>
                                                <td data-field="register_time" class="kt-datatable__cell" style=""><span
                                                            style="width: 100px;"><span
                                                                class="kt-font-bold">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span></span></td>
                                            </tr>
                                            <tr class="kt-datatable__row kt-mobile-add-number kt-mobile">
                                                <td class="kt-datatable__cell"><span>Permissions</span></td>
                                                <td data-field="admission_number" class="kt-datatable__cell" style="">
                                                    <span style="width: 100px;"><span class="btn btn-bold btn-sm btn-font-sm btn-label-info"> All </span></span></td>
                                            </tr>
                                            <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="kt-switch kt-switch--sm kt-switch--icon">
																	<label>
																		<input type="checkbox" checked="checked" name="">
																		<span></span>
																	</label>
																</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>#}
                                        </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 %}