{% extends '::base.html.twig' %}
{% block usercss %}
    {{ parent() }}
    <style>
        @media
        only screen and (max-width: 760px),
        (min-device-width: 768px) and (max-device-width: 1024px)  { 

            /*
            Label the data
            */
            td:nth-of-type(1):before { content: "#"; }
            td:nth-of-type(2):before { content: "Subject"; }
            td:nth-of-type(3):before { content: "Actions"; }
        }
    </style>
{% endblock %}
{% block body -%}

    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h6>Subject list</h6>
                </div>
                <div class="panel-body">

                    <div class="row">
                        <div class="col-sm-2">
                            <div class="form-group">
                                <label>No. of Records:</label>

                                <select name="maxItemPerPage" id="maxItemPerPage" class="form-control">
                                    <option id="10"
                                            {% if maxItemPerPage is defined and maxItemPerPage == 10 %}
                                                selected="selected"
                                            {% endif %}
                                            >10</option>
                                    <option id="20"
                                            {% if maxItemPerPage is defined and maxItemPerPage == 20 %}
                                                selected="selected"
                                            {% endif %}
                                            >20</option>
                                    <option id="30"
                                            {% if maxItemPerPage is defined and maxItemPerPage == 30 %}
                                                selected="selected"
                                            {% endif %}
                                            >30</option>
                                    <option id="50"
                                            {% if maxItemPerPage is defined and maxItemPerPage == 50 %}
                                                selected="selected"
                                            {% endif %}
                                            >50</option>
                                    <option id="100"
                                            {% if maxItemPerPage is defined and maxItemPerPage == 100 %}
                                                selected="selected"
                                            {% endif %}
                                            >100</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label>Search:</label>
                                <input type="text" name="search_text" id="search_text"  class="form-control"/>
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <div class="button_container">
                                <a class="btn btn-success btn-sm" href="{{ path('subject_new') }}">
                                    Add New Subject
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="data_container">
                        {{ include("AppBundle:MasterSubject:TableContent/index.html.twig") }}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block userscripts %}
    <script type="text/javascript">
        $(document).ready(function () {
//on select change, you navigate to indexAction and send the parameter maxItemPerPage
            $('#maxItemPerPage').change(function () {

                var url = "{{path('subject',{'maxItemPerPage':'_itemNum'})}}";
                var item = $('#maxItemPerPage').find(":selected").text();

                window.location.href = url.replace('_itemNum', item);
            });

            $("#search_text").on("keyup", function () {
                var pathname = window.location.pathname; // Returns path only
                __loadPage(pathname);
            });
        });
        function __loadPage(path) {
            var search_text = $("#search_text").val();
            $.ajax({
                type: "POST",
                url: path,
                data: {search_text: search_text},
                beforeSend: function () {
                    $("#ajax_loader_div").show();
                },
                success: function (html) {
                    $(".data_container").html(html);
                },
                complete: function () {
                    $("#ajax_loader_div").hide();
                }

            });
        }
    </script>
{% endblock %}