{% extends (app['twig_theme'] ~ '/' ~ 'layout.twig') | trans %}

{% set active = 'tv-channels' %}
{% set title = ('IPTV channels'|trans ~ ': ' ~ 'Organize channels'|trans) | trans %}

{% block footer %}
    {{ parent() }}

    <script type="text/javascript" src="./plugins/scrollTo/jquery.scrollTo.min.js" defer=""></script>
    <script type="text/javascript" src="./js/jquery.tmpl.min.js" defer=""></script>
    
    <script type="text/javascript">
       
        {% include (app.twig_theme ~ "/TvChannels/move_channel/move_channel.js.twig") %}

    </script>
{% endblock %}

{% block content %}
    <div id="iptv_list_move">
        <div class="row">
            <form id="form_">
                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 pull-left " >
                    <div class="col-xs-8 col-sm-8 no-padding input-group channel_diapason">
                        <label class="control-label col-xs-2 col-sm-2 no-modified">{{ 'Channels'|trans }}</label>
                        <div class="col-xs-5 col-sm-5 no-margin-right no-padding-right leftbordercircle">
                            <input class="form-control" placeholder="{{ 'from'|trans }}" type="text" id="channel_begin" name="channel_begin" value="{{ attribute(app, 'channel_begin') is defined ? app.channel_begin: 1 }}" data-validation="required, compare_number, number" data-validation-compare-element="#channel_end" data-validation-compare-operation="<=" data-validation-allowing="range[1;100000]" data-validation-error-msg-container="#channel_begin_error">
                            <label id="channel_begin_error"></label>
                        </div>
                        <div class="col-xs-5 col-sm-5 no-margin-left no-padding-left rightbordercircle">
                            <input class="form-control" placeholder="{{ 'to'|trans }}" type="text" id="channel_end" name="channel_end" value="{{ attribute(app, 'channel_end') is defined ? app.channel_end: 200 }}" data-validation="required, compare_number, number" data-validation-compare-element="#channel_begin" data-validation-compare-operation=">=" data-validation-allowing="range[1;100000]" data-validation-error-msg-container="#channel_end_error">
                            <label id="channel_end_error"></label>
                        </div>
                        <label id="channel_num_error" class="col-sm-offset-2 col-sm-10"></label>
                    </div>
                    <div class="col-xs-4 col-sm-4 no-modified no-margin no-padding-left">
                        <button class="btn btn-action green" type="button" id="iptv_list_move_show"><i class="fa fa-share fa-rotate-90"></i>{{ 'Get channels' |trans }}</button>
                    </div>
                </div>
                <div class="col-xs-6 col-sm-6">
                    <div class="input-group col-xs-8 col-sm-8 col-md-8 col-lg-8 pull-right no-padding"  id="searc_and_backlight">
                        <span class="input-group-addon"><i class="fa fa-search"></i></span>
                        <input type="text" placeholder="{{ 'Enter title or number of the channel'|trans }}..." class="form-control" data-original-title="" title="">
                    </div>
                </div>

                <div class="form-buttons col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div class="box">
                        <div class="box-content">
                            <div class="row">
                                <div class="text-right">
                                    <button class="btn btn-success " type="button" id="iptv_list_move_send">{{ 'Apply'|trans }}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </form>
        </div>
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div class="col-xs-12 col-sm-12 box_v2" id="channelListContainer"></div>
            </div>
        </div>
    </div>


    {% autoescape false %}
    <script type="text/template" id="list_item">
        <div class="box ${locked} ${empty}"  style="position:relative; z-index:30;">
            <div class="box-header ${empty}"  style="position:relative; z-index:30;">
                <div class="box-name col-sm-11"  style="position:relative; z-index:30;">
                    <span class="curr_num col-xs-2 col-sm-2 no-modified no-padding" data-number="${old_number}">${number}</span>
                    <div class="channel col-xs-10 col-sm-10 no-padding {{ "{{if relocating }}" }}relocating{{ '{{/if}}' }}">
                            <span class="no-padding">
                              <!----  <img class="img-rounded" src="${logo}" alt="">--->
                            </span>
                        <a href="${link}" class="no-padding name-link" title="${name}">${name}</a>
                        {{ "{{if notempty == '1'}}" }}
                            <a class="lock-link" title="{{ "{{if notlocked == '1'}}" }}{{ 'Lock channel position'|trans }}{{ '{{else}}' }}{{ 'Unlock channel position'|trans }}{{ '{{/if}}' }}">
                                <i data-id="${id}" class="fa fa-{{ "{{if notlocked == '1'}}" }}un{{ '{{/if}}' }}lock"></i>
                            </a>
                        {{ '{{else}}' }}
                            {#<a class="remove-link">
                                <i class="fa fa-minus"></i>
                            </a>#}
                        {{ '{{/if}}' }}
                    </div>
                </div>
                <div class="no-move"></div>
            </div>
        </div>
    </script>
    <script type="text/template" id="list_counter">
        <div class="counter">
            <span>${from} - ${to}</span>
            {#<a class="counter-add-link" data-fromnumber="${from}">
                <i class="fa fa-plus"></i>
            </a>#}
        </div>
    </script>
    <script type="text/template" id="modal_form_buttons">
        <div class="pull-left no-padding">&nbsp;</div>
        <div class="pull-right no-padding">
            <button type="reset" class="btn btn-default pull-left">{{ 'Cancel'|trans }}</button>
            <button type="button" class="btn btn-success pull-right">${ok_title}</button>
        </div>
    </script>
    {% endautoescape %}

{% endblock %}