{% extends 'resumes/base/base.html' %}

{% block content-header %}
    <h1>{{ meta.verbose_name }}
        <small>
            {% block header-left %}
                {% if request.GET.search %}
                    查询"<b class="text-red"> {{ request.GET.search }} </b>",共
                    <b class="text-red"> {{ page_obj.paginator.count }} </b>条, 显示第
                    <b class="text-red"> {{ page_obj.start_index }} </b>条到
                    <b class="text-red"> {{ page_obj.end_index }} </b>条.
                {% else %}
                    共<b> {{ page_obj.paginator.count }} </b>条, 显示第<b> {{ page_obj.start_index }} </b>到
                    <b> {{ page_obj.end_index }} </b>条.
                {% endif %}
            {% endblock %}
            <span> 选中 <b id="select_count">0</b> 条.</span>
            <a id="select_all" title="Click here to select the objects across all pages"
               style="display: none;" class="hidden-xs" href="javascript:void(0)">
                选中所有的 {{ page_obj.paginator.count }} 条</a>
            <a id="select_page" style="display: none;" href="javascript:void(0)" class="hidden-xs">
                <b class="text-red">已选中剩余条目,请谨慎操作.</b>
                清除选中所有的<b class="text-red"> {{ page_obj.paginator.count }}</b> 条
            </a>
        </small>
    </h1>
{% endblock %}

{% block main-content %}
<div class="card m-2">
  <div class="card-body">
    <h5 class="card-title"><a class="btn btn-default btn-sm margin-r-5" href="{%url 'resumes:new' model_name %}">新建</a></h5>
    <p class="card-text">
      <div class="box-body table-responsive">
        <table id="objects-list" class="table table-bordered table-hover table-condensed text-nowrap">
          <thead>
            <tr>
            {%for item in thead%}
              <th scope="col" name="{{item.field}}" {{item.class_attrib}}>
                {%if item.sortable%}
                  {%if item.is_sorted%}
                  <a title="正反序切换" href="{{item.toggle_link}}">{{item.text}}
                    <i class="fa fa-sort-alpha-{{item.sorted_key}}"></i>
                  </a>
                  <span class="no-print hidden-xs pull-right">
                    <a title="移除本列排序" href="{{item.remove_link}}">
                    <i class="fa fa-remove text-danger"></i>
                    </a>
                  </span>
                  {%else%}
                  <a title="点击可排序" href="{{item.toggle_link}}">{{item.text}}</a>
                  {%endif%}
                {%else%}
                  {{item.text}}
                {%endif%}
              </th>
            {%endfor%}
            </tr>
          </thead>
          <tbody>
          {%block objects-list%}
            {%for obj in tbody%}
              <tr>{{obj}}</tr>
            {%endfor%}
          {%endblock%}
          </tbody>

  </div>
        </table>
   <hr>
        <div class="box-footer no-print clearfix" style="display: block;">

        {% if is_paginated %}
          <ul class="pagination pagination-sm no-margin pull-right">
            {% if paginate %}
            <div class="btn-group dropup pull-left">
              <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
                <span class="caret"></span>
              </button>
              <ul class="dropdown-menu">
                {{paginate}}
              </ul>
            </div>
            {% endif %}
            {% if page_obj.has_previous %}
              <li><a href="?page=1">首页</a></li>
              <li><a href="?page={{ page_obj.previous_page_number  }}">上一页</a></li>
            {% else %}
              <li class="previous disabled"><a>上一页</a></li>
            {% endif %}
              <li class="previous disabled">
              <span>{{ page_obj.number }} / {{ page_obj.paginator.num_pages }}</span>
              </li>
            {% if page_obj.has_next %}
              <li><a href="?page={{ page_obj.next_page_number }}">下一页</a></li>
              <li><a href="?page={{ page_obj.paginator.num_pages }}">末页</a></li>
            {% else %}
              <li class="previous disabled"><a>下一页</a></li>
            {% endif %}
          </ul>
        {% endif %}
    </div>
    </div></p>
  </div>
</div>
{% endblock %}

{% block extra-js %}
    <script>
        $(document).ready(function () {
            var ItemCounts = {{object_list.count}};
            var ThCheckBox = $("table thead tr th input[type='checkbox']");
            var TdCheckBox = $("table tbody tr td input[type='checkbox']");
            var RelDom = $("#table-tools .action-related");

            {#TdCheckBox.shiftcheckbox();#}

            function updateColor() {
                TdCheckBox.filter(':checked').parent().parent().addClass('success');
                TdCheckBox.not(':checked').parent().parent().removeClass('success');
            }

            function updateRelated() {
                var checked = TdCheckBox.filter(':checked');
                if (checked.length > 0) {
                    RelDom.filter(':disabled').removeClass('disabled').attr('disabled', false);
                } else {
                    RelDom.addClass('disabled').attr('disabled', true);
                }
            }

            updateSelect = function () {
                var checked = TdCheckBox.filter(':checked');
                $("#select_count").html(checked.length);
                if (checked.length < ItemCounts) {
                    ThCheckBox.prop('checked', false).val('page');
                    $("#select_all, #select_page").hide();
                } else {
                    ThCheckBox.prop('checked', true);
                    {%if is_paginated%}$("#select_all").show();{%endif%}
                }
                updateColor();
                updateRelated();
            }

            TdCheckBox.click(function () {
                updateSelect();
            });

            $("#select_all").click(function () {
                TdCheckBox.prop('checked', 'checked');
                updateSelect();
                var _count = {{page_obj.paginator.count}};
                $("#select_count").html(_count);
                ThCheckBox.val('all');
                $(this).hide();
                $("#select_page").show();
            });

            $("#action-toggle").click(function () {
                TdCheckBox.prop('checked', $(this).prop('checked'));
                updateSelect();
                {%if is_paginated%}
                    if (ThCheckBox.is('input:checked')) {
                        $("#select_all").show();
                    } else {
                        $("#select_all").hide();
                    }
                {%endif%}
            });

            $("#select_page").click(function () {
                updateSelect();
                ThCheckBox.val('page');
                $(this).hide();
                $("#select_all").show();
            })

            $("#search button").on('click', function (e) {
                var value = $("#search input").val();
                if (value) {
                    document.location.href = "?search=" + value + "";
                }
            });

            $("#search input").on("keydown", function (e) {
                if (e.keyCode == 13) {
                    var value = $("#search input").val();
                    if (value) {
                        document.location.href = "?search=" + value + "";
                    }
                }
            });
        })
    </script>
{% endblock %}