{% extends "layout.html" %}

{% set title = 'Doctors List' %}

{% block content %}

<section class="sec-pad-sm npt">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                {% include 'component/search.html' %}
                <div class="tab-head">
                    <ul class="nav nav-tabs text-center" role="tablist">
                        <li role="presentation" class="active"><a class="text-upper" href="#doctors" aria-controls="doctors" role="tab" data-toggle="tab">doctors</a></li>
                        <li role="presentation"><a class="text-upper" href="#products" aria-controls="products" role="tab" data-toggle="tab">products</a></li>
                        <li role="presentation"><a class="text-upper" href="#media" aria-controls="media" role="tab" data-toggle="tab">media</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>


<section class="sec-pad npt">
    <div class="container">
        <section class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="doctors">
                <div class="row">
                    <aside class="col-sm-3">
                        <div class="filter-switcher">
                            <a href="#" class="d-block pull-right">
                                <img src="_assets/img/icons/filter-icon.png" alt="" class="mrsm">
                                Filter
                            </a>
                        </div>
                        <form class="filter">
                            <ul class="filter-c">
                                <li class="no-padding">
                                    <div class="filter-head">
                                        <a href="#" class="capitalize">
                                            filter results
                                            <img src="_assets/img/icons/close-icon.png" alt="" class="pull-right">
                                        </a>
                                    </div>
                                </li>
                                <li class="no-padding pbxxlg">
                                    <label  class="text-upper text-bold">speciality</label>
                                    <div class="select-container">
                                        <input type="text" placeholder="Search Speciality">
                                    </div>
                                    <div class="checkbox-custom mtmd">
                                        <div>
                                            <input type="checkbox" name="type" id="speciality-name" class="form-radio">
                                            <label class="mlxs" for="speciality-name">Speciality Name</label>
                                        </div>
                                        <div class="mtsm">
                                            <input type="checkbox" name="type" id="speciality-name-1" class="form-radio">
                                            <label class="mlxs" for="speciality-name-1">Speciality Name</label>
                                        </div>
                                        <div class="mtsm">
                                            <input type="checkbox" name="type" id="speciality-name-2" class="form-radio">
                                            <label class="mlxs" for="speciality-name-2">Speciality Name</label>
                                        </div>
                                        <div class="mtsm">
                                            <input type="checkbox" name="type" id="speciality-name-3" class="form-radio">
                                            <label class="mlxs" for="speciality-name-3">Speciality Name</label>
                                        </div>
                                    </div>
                                </li>
                                <li class="no-padding pbxxlg ptlg">
                                    <label  class="text-upper text-bold">area</label>
                                    <div class="select-container">
                                        <input type="text" placeholder="Search Area">
                                    </div>
                                    <div class="checkbox-custom mtmd">
                                        <div>
                                            <input type="checkbox" name="type" id="area-1" class="form-radio">
                                            <label class="mlxs" for="area-1">Area 1</label>
                                        </div>
                                        <div class="mtsm">
                                            <input type="checkbox" name="type" id="area-2" class="form-radio">
                                            <label class="mlxs" for="area-2">Area 2</label>
                                        </div>
                                        <div class="mtsm">
                                            <input type="checkbox" name="type" id="area-3" class="form-radio">
                                            <label class="mlxs" for="area-3">Area 3</label>
                                        </div>
                                        <div class="mtsm">
                                            <input type="checkbox" name="type" id="area-4" class="form-radio">
                                            <label class="mlxs" for="area-4">Area 4</label>
                                        </div>
                                    </div>
                                </li>
                                <li class="no-padding pbxxlg ptlg">
                                    <label  class="text-upper text-bold">gender</label>
                                    <div class="checkbox-custom radio-custom mtmd">
                                        <div>
                                            <input type="radio" name="gender" id="male" class="form-radio">
                                            <label class="mlxs" for="male">Male</label>
                                        </div>
                                        <div class="mtsm">
                                            <input type="radio" name="gender" id="female" class="form-radio">
                                            <label class="mlxs" for="female">Female</label>
                                        </div>
                                    </div>
                                </li>
                                <li class="no-padding pbxxlg ptlg">
                                    <label class="text-upper text-bold mbxlg">fees</label>
                                    <div class="range-container">
                                        <div class="range-slider mbsm">
                                            <div id="range-slider"></div>
                                        </div>
                                    </div>
                                </li>
                                <li class="no-padding pbxxlg ptlg">
                                    <label class="text-upper text-bold">ranking</label>
                                    <div class="range-container">
                                        <div class="rank-values">
                                            <span class="pull-left">.5</span>
                                            <span class="pull-right">10</span>
                                        </div>
                                        <div class="range-slider mbsm">
                                            <div id="rank-slider"></div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </form>
                    </aside>
                    <div class="col-sm-9">
                        <div class="doctors-list">
                            {% for i in range(0, 4) -%}
                            <div class="doctor-li mbxxlg">
                                <div class="li-head pblg mblg">
                                    <div class="row">
                                        <div class="col-sm-3">
                                            <a href="doctor-profile.html">
                                                <figure class="cover li-img" style="background-image: url('_assets/img/doctors/01.jpg')">
                                                    <span class="rating text-bold pull-right visible-xs">8.8</span>
                                                </figure>
                                            </a>
                                        </div>
                                        <div class="col-sm-9">
                                            <div class="li-content ptsm pbsm">
                                                <div class="clearfix">
                                                    <h3 class="no-margin text-bold mbmd pull-left">
                                                        <a href="doctor-profile.html">Dr. Riyad Mohamad</a>
                                                        <img src="_assets/img/icons/verified.png" class="mlxs" alt="">
                                                    </h3>
                                                    <span class="rating text-bold pull-right visible-sm">8.8</span>
                                                </div>
                                                <p class="mbmd">Specialized in ...</p>
                                                <p class="desc">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque...</p>
                                                <div class="clearfix">
                                                    <div class="price pull-left">
                                                        <img src="_assets/img/icons/money.png" class="mrxs" alt="">
                                                        <span class="text-bold">250 EGP.</span>
                                                    </div>
                                                    <div class="li-data text-right pull-right">
                                                        <div class="price distance">
                                                            <img src="_assets/img/icons/distance.png" class="mrxs" alt="">
                                                            <span>25.0 km away</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="slider pblg mblg">
                                    <div class="services-slider">
                                        {% for i in range(0, 10) -%}
                                        <div class="doctor-service">
                                            <div class="service-head">
                                                <h4 class="no-margin mbxxlg text-bold pull-left">Long Service Name</h4>
                                                <a href="#" class="pull-right"><img src="_assets/img/icons/info.png" alt=""></a>
                                            </div>
                                            <div class="service-price text-right">
                                                <span class="d-block text-bold">2500 EGP</span>
                                                <span class="d-block text-bold">3500 EGP</span>
                                            </div>
                                        </div>
                                        {%- endfor %}
                                    </div>
                                </div>
                                <div class="li-footer">
                                    <div class="row">
                                        <div class="col-sm-4 col-xs-12">
                                            <div class="btn-actions mtsm mbsm">
                                                <a href="#" class="mrmd"><img src="_assets/img/icons/save-icon.png" alt=""></a>
                                                <a href="#" class="mrmd"><img src="_assets/img/icons/share.png" alt=""></a>
                                                <a href="#" class="mrmd text-bold"><img src="_assets/img/icons/like-icon.png" class="mrsm" alt="">240</a>
                                            </div>
                                        </div>
                                        <div class="col-sm-3 col-xs-12 pull-right text-right">
                                            <a href="" class="btn btn-purple text-upper d-block">reserve</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {%- endfor %}
                        </div>
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="products">
                <div class="row">
                    <aside class="col-sm-3">
                        <div class="filter-switcher">
                            <a href="#" class="d-block pull-right">
                                <img src="_assets/img/icons/filter-icon.png" alt="" class="mrsm">
                                Filter
                            </a>
                        </div>
                        <form class="filter">
                            <ul class="filter-c">
                                <li class="no-padding">
                                    <div class="filter-head">
                                        <a href="#" class="capitalize">
                                            filter results
                                            <img src="_assets/img/icons/close-icon.png" alt="" class="pull-right">
                                        </a>
                                    </div>
                                </li>
                                <li class="no-padding pbxxlg">
                                    <label  class="text-upper text-bold">brands</label>
                                    <div class="select-container">
                                        <input type="text" placeholder="Search Speciality">
                                    </div>
                                    <div class="checkbox-custom mtmd">
                                        <div>
                                            <input type="checkbox" name="type" id="Oral-B" class="form-radio">
                                            <label class="mlxs" for="Oral-B">Oral-B</label>
                                        </div>
                                        <div class="mtsm">
                                            <input type="checkbox" name="type" id="Colgate" class="form-radio">
                                            <label class="mlxs" for="Colgate">Colgate</label>
                                        </div>
                                        <div class="mtsm">
                                            <input type="checkbox" name="type" id="Crest" class="form-radio">
                                            <label class="mlxs" for="Crest">Crest</label>
                                        </div>
                                        <div class="mtsm">
                                            <input type="checkbox" name="type" id="Signal" class="form-radio">
                                            <label class="mlxs" for="Signal">Signal</label>
                                        </div>
                                    </div>
                                </li>
                                <li class="no-padding pbxxlg ptlg">
                                    <label  class="text-upper text-bold">categories</label>
                                    <div class="select-container">
                                        <input type="text" placeholder="Search Area">
                                    </div>
                                    <div class="checkbox-custom mtmd">
                                        <div>
                                            <input type="checkbox" name="type" id="Tooth-Brush" class="form-radio">
                                            <label class="mlxs" for="Tooth-Brush">Tooth Brush</label>
                                        </div>
                                        <div class="mtsm">
                                            <input type="checkbox" name="type" id="Toothpaste" class="form-radio">
                                            <label class="mlxs" for="Toothpaste">Toothpaste</label>
                                        </div>
                                        <div class="mtsm">
                                            <input type="checkbox" name="type" id="Mouth-Wash" class="form-radio">
                                            <label class="mlxs" for="Mouth-Wash">Mouth-Wash</label>
                                        </div>
                                        <div class="mtsm">
                                            <input type="checkbox" name="type" id="Dental-Floss" class="form-radio">
                                            <label class="mlxs" for="Dental-Floss">Dental Floss</label>
                                        </div>
                                    </div>
                                </li>
                                <li class="no-padding pbxxlg ptlg">
                                    <label class="text-upper text-bold mbxxlg">Price Range</label>
                                    <div class="range-container orange">
                                        <div class="range-slider mbsm">
                                            <div id="price-range"></div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </form>
                    </aside>
                    <div class="col-sm-9">
                        <div class="doctors-list product-list">
                            {% for i in range(0, 4) -%}
                            <div class="doctor-li mbxxlg">
                                <div class="li-head li-product pblg mblg">
                                    <div class="row">
                                        <div class="col-sm-3">
                                            <a href="product.html">
                                                <figure class="doctor-img product-img">
                                                    <img src="_assets/img/products/01.jpg" alt="">
                                                </figure>
                                            </a>
                                        </div>
                                        <div class="col-sm-9">
                                            <div class="li-content ptsm pbsm">
                                                <div class="clearfix">
                                                    <h3 class="no-margin text-bold mbmd pull-left prxxlg">
                                                        <a href="product.html">
                                                            Johnson's Shiny Drops, Kids
                                                            Shampoo, Wit a touch of silk
                                                            proteins 500 ml
                                                        </a>
                                                    </h3>
                                                    <div class="price pull-right">
                                                        <span class="text-bold d-block">250 EGP</span>
                                                        <span class="text-bold d-block">250 EGP</span>
                                                    </div>
                                                </div>
                                                <p class="mbmd">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="li-footer">
                                    <div class="row">
                                        <div class="col-sm-4 col-xs-5">
                                            <div class="btn-actions mtsm mbsm">
                                                <a href="#" class="mrxxlg"><img src="_assets/img/icons/save-icon.png" alt=""></a>
                                                <a href="#" class="mrxxlg"><img src="_assets/img/icons/share.png" alt=""></a>
                                            </div>
                                        </div>
                                        <div class="col-sm-3 col-xs-7 pull-right text-right">
                                            <a href="" class="btn btn-orange text-upper d-block">add to cart</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {%- endfor %}
                        </div>
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="media">
                <div class="row">
                    <aside class="col-sm-3">
                        <div class="filter-switcher">
                            <a href="#" class="d-block pull-right">
                                <img src="_assets/img/icons/filter-icon.png" alt="" class="mrsm">
                                Filter
                            </a>
                        </div>
                        <form class="filter">
                            <ul class="filter-c">
                                <li class="no-padding">
                                    <div class="filter-head">
                                        <a href="#" class="capitalize">
                                            filter results
                                            <img src="_assets/img/icons/close-icon.png" alt="" class="pull-right">
                                        </a>
                                    </div>
                                </li>
                                <li class="no-padding pbxxlg">
                                    <label  class="text-upper text-bold">time</label>
                                    <div class="checkbox-custom radio-custom mtmd">
                                        <div>
                                            <input type="radio" name="time" id="all" class="form-radio" checked>
                                            <label class="mlxs" for="all">All</label>
                                        </div>
                                        <div class="mtsm">
                                            <input type="radio" name="time" id="One-Day" class="form-radio">
                                            <label class="mlxs" for="One-Day">One Day</label>
                                        </div>
                                        <div class="mtsm">
                                            <input type="radio" name="time" id="One-Month" class="form-radio">
                                            <label class="mlxs" for="One-Month">One Month</label>
                                        </div>
                                        <div class="mtsm">
                                            <input type="radio" name="time" id="One-Year" class="form-radio">
                                            <label class="mlxs" for="One-Year">One Year</label>
                                        </div>
                                    </div>
                                </li>
                                <li class="no-padding pbxxlg ptlg">
                                    <label  class="text-upper text-bold">speciality</label>
                                    <div class="select-container">
                                        <input type="text" placeholder="Search Area">
                                    </div>
                                    <div class="checkbox-custom mtmd">
                                        <div>
                                            <input type="checkbox" name="type" id="Dermatologist" class="form-radio">
                                            <label class="mlxs" for="Dermatologist">Dermatologist</label>
                                        </div>
                                        <div class="mtsm">
                                            <input type="checkbox" name="type" id="Dentist" class="form-radio">
                                            <label class="mlxs" for="Dentist">Dentist</label>
                                        </div>
                                        <div class="mtsm">
                                            <input type="checkbox" name="type" id="Psychiatrist" class="form-radio">
                                            <label class="mlxs" for="Psychiatrist">Psychiatrist</label>
                                        </div>
                                        <div class="mtsm">
                                            <input type="checkbox" name="type" id="Pediatrician" class="form-radio">
                                            <label class="mlxs" for="Pediatrician">Pediatrician</label>
                                        </div>
                                        <div class="mtsm">
                                            <input type="checkbox" name="type" id="Neurologist" class="form-radio">
                                            <label class="mlxs" for="Neurologist">Neurologist</label>
                                        </div>
                                        <div class="mtsm">
                                            <input type="checkbox" name="type" id="Orthopedist" class="form-radio">
                                            <label class="mlxs" for="Orthopedist">Orthopedist</label>
                                        </div>
                                    </div>
                                </li>
                                <li class="no-padding pbxxlg ptlg">
                                    <label  class="text-upper text-bold">type</label>
                                    <div class="checkbox-custom radio-custom mtmd">
                                        <div>
                                            <input type="radio" name="type" id="all-1" class="form-radio" checked>
                                            <label class="mlxs" for="all-1">All</label>
                                        </div>
                                        <div class="mtsm">
                                            <input type="radio" name="type" id="Videos" class="form-radio">
                                            <label class="mlxs" for="Videos">Videos</label>
                                        </div>
                                        <div class="mtsm">
                                            <input type="radio" name="type" id="Articles" class="form-radio">
                                            <label class="mlxs" for="Articles">Articles</label>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </form>
                    </aside>
                    <div class="col-sm-9">
                        <div class="media">
                            {% for i in range(0, 4) -%}
                                <div class="media-block mbxxlg">
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <a href="#">
                                                <figure class="media-img cover" style="background-image: url('_assets/img/gallery/17.jpg')"></figure>
                                            </a>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="media-content">
                                                <h3 class="no-margin text-bold mbmd">
                                                    <a href="#">
                                                        Johnson's Shiny Drops, Kids Shampoo, Wit a touch of silk proteins 500 ml
                                                    </a>
                                                </h3>
                                                <span class="info d-block mblg">Speciality Name | Two weeks ago</span>
                                                <p>
                                                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {%- endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</section>

{% endblock content %}

{% block JS %}
<script>
    $( function() {

        function isRTL(){
            return $('html').attr('dir') === 'rtl';
        }

        $("#rank-slider").slider({
            range: false,
            min: 0.5,
            max: 10,
            step: 1,
            values: [ 2 ],
            slide: function (event, ui) {
                for (var i = 0; i < ui.values.length; ++i) {
                    $("input.sliderValue[data-index=" + i + "]").val(ui.values[i]);
                }
                if ( isRTL() === true ){
                    $("input.sliderValue[data-index=" + i + "]").val(10 - ui.value);
                }
            },
            stop: function (event, ui) {
                $("input.sliderValue").trigger('change');
            }
        });

        function collision($div1, $div2) {
            var x1 = $div1.offset().left;
            var w1 = 40;
            var r1 = x1 + w1;
            var x2 = $div2.offset().left;
            var w2 = 40;
            var r2 = x2 + w2;

            if (r1 < x2 || x1 > r2) return false;
            return true;
        }

        // Slider call
        var rangeSlider = $('#range-slider');
        rangeSlider.slider({
            range: true,
            min: 0,
            max: 500,
            values: [ 0, 500 ],
            slide: function(event, ui) {

                $('.ui-slider-handle:eq(0) .price-range-min').html( ui.values[ 0 ] + ' <br/> EGP');
                $('.ui-slider-handle:eq(1) .price-range-max').html( ui.values[ 1 ] + '<br/> EGP');
                $('.price-range-both').html('<i> EGP ' + ui.values[ 0 ] + ' - </i>EGP' + ui.values[ 1 ] );

                if ( isRTL() === true ){
                    $('.ui-slider-handle:eq(0) .price-range-min').html( max - ui.values[ 0 ] + ' <br/> EGP');
                    $('.ui-slider-handle:eq(1) .price-range-max').html( max - ui.values[ 1 ] + '<br/> EGP');
                    $('.price-range-both').html('<i> EGP ' +  ( max - ui.values[ 0 ] ) + ' - </i>EGP' +  ( max - ui.values[ 1 ] ) );
                }

                if ( ui.values[0] == ui.values[1] ) {
                    $('.price-range-both i').css('display', 'none');
                } else {
                    $('.price-range-both i').css('display', 'inline');
                }

                if (collision($('.price-range-min'), $('.price-range-max')) == true) {
                    $('.price-range-min, .price-range-max').css('opacity', '0');
                    $('.price-range-both').css('display', 'block');
                } else {
                    $('.price-range-min, .price-range-max').css('opacity', '1');
                    $('.price-range-both').css('display', 'none');
                }
            },
        });

        if ( isRTL() === true ){
            var max = rangeSlider.slider("option", "max");
            $('#range-slider .ui-slider-range').append('<span class="price-range-both value"><i> ' + rangeSlider.slider('values', 1 )  + ' EGP - </i>' + rangeSlider.slider('values', 0 )  + '</span>');
            $('#range-slider .ui-slider-handle:eq(0)').append('<span class="price-range-min value">' +  rangeSlider.slider('values', 1 )  + ' EGP</span>');
            $('#range-slider .ui-slider-handle:eq(1)').append('<span class="price-range-max value">' +  rangeSlider.slider('values', 0 ) + ' EGP</span>');
        } else {
            $('#range-slider .ui-slider-range').append('<span class="price-range-both value"><i>' + rangeSlider.slider('values', 0 ) + ' EGP - </i>' + rangeSlider.slider('values', 1 ) + '</span>');
            $('#range-slider .ui-slider-handle:eq(0)').append('<span class="price-range-min value">' + rangeSlider.slider('values', 0 ) + ' EGP</span>');
            $('#range-slider .ui-slider-handle:eq(1)').append('<span class="price-range-max value">' + rangeSlider.slider('values', 1 ) + ' EGP</span>');
        }

        var priceSlider = $('#price-range');
        priceSlider.slider({
            range: true,
            min: 0,
            max: 500,
            values: [ 0, 500 ],
            slide: function(event, ui) {

                $('#price-range .ui-slider-handle:eq(0) .price-range-min').html( ui.values[ 0 ] + ' <br/> EGP');
                $('#price-range .ui-slider-handle:eq(1) .price-range-max').html( ui.values[ 1 ] + '<br/> EGP');
                $('#price-range .price-range-both').html('<i> EGP ' + ui.values[ 0 ] + ' - </i>EGP' + ui.values[ 1 ] );

                if ( isRTL() === true ){
                    $('#price-range .ui-slider-handle:eq(0) .price-range-min').html( max - ui.values[ 0 ] + ' <br/> EGP');
                    $('#price-range .ui-slider-handle:eq(1) .price-range-max').html( max - ui.values[ 1 ] + '<br/> EGP');
                    $('#price-range .price-range-both').html('<i> EGP ' +  ( max - ui.values[ 0 ] ) + ' - </i>EGP' +  ( max - ui.values[ 1 ] ) );
                }

                if ( ui.values[0] == ui.values[1] ) {
                    $('#price-range .price-range-both i').css('display', 'none');
                } else {
                    $('#price-range .price-range-both i').css('display', 'inline');
                }

                if (collision($('#price-range .price-range-min'), $('#price-range .price-range-max')) == true) {
                    $('#price-range .price-range-min, .price-range-max').css('opacity', '0');
                    $('#price-range .price-range-both').css('display', 'block');
                } else {
                    $('#price-range .price-range-min, .price-range-max').css('opacity', '1');
                    $('#price-range .price-range-both').css('display', 'none');
                }
            }
        });

        if ( isRTL() === true ){
            var max = priceSlider.slider("option", "max");
            $('#price-range .ui-slider-range').append('<span class="price-range-both value"><i> ' + priceSlider.slider('values', 1 )  + ' EGP - </i>' + priceSlider.slider('values', 0 )  + '</span>');
            $('#price-range .ui-slider-handle:eq(0)').append('<span class="price-range-min value">' +  priceSlider.slider('values', 1 )  + ' EGP</span>');
            $('#price-range .ui-slider-handle:eq(1)').append('<span class="price-range-max value">' +  priceSlider.slider('values', 0 ) + ' EGP</span>');
        } else {
            $('#price-range .ui-slider-range').append('<span class="price-range-both value"><i>' + priceSlider.slider('values', 0 ) + ' EGP - </i>' + priceSlider.slider('values', 1 ) + '</span>');
            $('#price-range .ui-slider-handle:eq(0)').append('<span class="price-range-min value">' + priceSlider.slider('values', 0 ) + ' EGP</span>');
            $('#price-range .ui-slider-handle:eq(1)').append('<span class="price-range-max value">' + priceSlider.slider('values', 1 ) + ' EGP</span>');
        }

    });

</script>
{% endblock %}