<!--#set global $pane="Sorting"#-->
<!--#set global $help_uri = $confighelpuri + "sorting"#-->
<!--#include $webdir + "/_inc_header_uc.tmpl"#-->
<div class="colmask">
    <div class="padTable section">
        <a class="main-helplink" href="$help_uri" target="_blank"><span class="glyphicon glyphicon-question-sign"></span></a>
        $T('explain-sorting')
    </div>
    <div class="padding alt section">
        <button type="button" class="btn btn-default addSorter"><span class="glyphicon glyphicon-plus"></span> $T('add-sorter')</button>
        <label for="advanced-settings-button" class="form-control advanced-button ">
            <input type="checkbox" id="advanced-settings-button" name="advanced-settings-button"> $T('button-advanced')
        </label>
        <div class="advanced-buttonSeperator"></div>
    </div>

    <div class="sortables">
        <!--#for $cur, $slot in enumerate($slotinfo)#-->
        <!--#set $selected_types = [$str(entry) for entry in $slot.sort_type]#-->
        <!--#set $selected_types = ["0"] if not len($selected_types) else $selected_types #-->
        <!-- SORTER $cur -->
        <div class="section <!--#if $cur != 0#-->sorter<!--#end if#-->" id="sorter_$cur" <!--#if $cur == 0#-->style="display: none;"<!--#end if#-->>
            <form action="save_sorter" method="post" autocomplete="off" <!--#if $cur != 0#-->class="sorting-row"<!--#end if#-->>
                <input type="hidden" name="apikey" value="$apikey" />
                <input type="hidden" name="order" value="$slot.order" />
                <input type="hidden" value="$slot.name" name="name" />
                <!--#if $cur == 0#-->
                <input type="hidden" rel="$slot.name" name="is_active" value="$slot.is_active" />
                <!--#end if#-->
                <div class="float-right">
                    <span class="glyphicon glyphicon-option-vertical"></span>
                </div>
                <div class="col2">
                    <!--#if $cur == 0#-->
                    <h3>$T('add-sorter') <a href="$help_uri" target="_blank"><span class="glyphicon glyphicon-question-sign"></span></a></h3>
                    <!--#else#-->
                    <h3>$slot.name <a href="$help_uri" target="_blank"><span class="glyphicon glyphicon-question-sign"></span></a></h3>
                    <div class="sorter-switch-container wide">
                        <input type="checkbox" class="toggleSorterCheckbox sorter-switch float-left" rel="$slot.name" name="is_active" id="is_active_$cur" value="$slot.is_active" <!--#if $slot.is_active != 0 then 'checked="checked"' else ""#--> />
                        <label class="sorter-switch float-left" for="is_active_$cur">$T('enabled')</label>
                    </div>
                    <button class="btn btn-default showSorter" type="button">
                        <span class="glyphicon glyphicon-pencil"></span> $T('showDetails')
                    </button>
                    <!--#end if#-->
                </div>
                <!--#if $cur != 0#-->
                <div class="col1">
                    <fieldset>
                        <div class="field-pair showSorter">
                            <label class="config" for="field_sort_string_display_$cur">$T('sortString')</label>
                            <input type="text" name="sort_string_display" id="field_sort_string_display_$cur" value="$slot.sort_string" disabled />
                        </div>
                        <div class="field-pair showSorter">
                            <label class="config" for="sort_cats_display_$cur">$T('affectedCat')</label>
                            <select name="sort_cats_display" multiple="multiple" class="multiple_cats" id="sort_cats_display_$cur" size="$len($categories)" disabled>
                                <!--#for $cat in $categories#-->
                                    <option value="$cat" <!--#if $cat.lower() in $slot.sort_cats then 'selected="selected"' else ""#-->>$Tspec($cat)</option>
                                <!--#end for#-->
                            </select>
                        </div>
                    </fieldset>
                </div>
                <!--#end if#-->
                <div class="col1" <!--#if $cur != 0#-->style="display: none;"<!--#end if#-->>
                    <fieldset>
                        <div class="field-pair">
                            <label class="config" for="displayname_$cur">$T('name')</label>
                            <input type="text" name="newname" value="$slot.name" id="displayname_$cur" required="required" />
                        </div>
                        <div class="field-pair">
                            <label class="config" for="field_sort_string_$cur">$T('sortString')</label>
                            <input type="text" name="sort_string" id="field_sort_string_$cur" value="$slot.sort_string" required="required" />
                            <button type="button" class="btn btn-default patternKey" onclick="jQuery('#pattern_explainer_$cur').toggle(); window.scrollBy(0, 500);">
                                <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> $T('sort-legenda')
                            </button>
                        </div>

                        <div class="field-pair">
                            <label class="config">$T('presetSort')</label>
                            <div class="presets float-left">
                                <strong>$T('button-Series'):</strong>
                                <input type="button" class="btn btn-default" onclick="set_preset($cur, '%sn/%sn - S%0sE%0e - %en.%ext', '', '$T('show-dot-name')'+'.S01E01.$T('ep-dot-name').720p.DTS');" value="$T('button-showFolder')" />
                                <input type="button" class="btn btn-default" onclick="set_preset($cur, '%sn/Season %s/%sn - S%0sE%0e - %en.%ext', '', '$T('show-dot-name')'+'.S01E01.$T('ep-dot-name').720p.DTS');" value="$T('button-seasonFolder')" /><br/>
                                <strong>$T('guessit-type-movie'):</strong>
                                <input type="button" class="btn btn-default" onclick="set_preset($cur, '%title (%y)/%title (%y).%ext',' CD%1', '$T('movie-dot-name').2023.$T('movie-dot-name').1080p.DD');" value="$T('button-inFolders')" />
                                <input type="button" class="btn btn-default" onclick="set_preset($cur, '%title (%y).%ext',' CD%1', '$T('movie-dot-name').2023.$T('movie-dot-name').1080p.DD');" value="$T('button-noFolders')" />
                                <input type="button" class="btn btn-default" onclick="set_preset($cur, '%0decade/%title (%y).%ext',' CD%1', '$T('movie-dot-name').2023.$T('movie-dot-name').1080p.DD');" value="$T('decade')" /><br/>
                                <strong>$T('cmenu-general'):</strong>
                                <input type="button" class="btn btn-default" onclick="set_preset($cur, '%dn.%ext', '', '')" value="$T('button-FileLikeFolder')" />
                            </div>
                        </div>
                        <div class="field-pair advanced-settings">
                            <label class="config" for="field_sort_type_$cur">$T('guessit-type')</label>
                            <select name="sort_type" multiple="multiple" class="multiple_cats" size="5" id="field_sort_type_$cur">
                                <option value="0" <!--#if "0" in $selected_types then 'selected="selected"' else ""#-->>$T('guessit-type-all')</option>
                                <option value="1" <!--#if "1" in $selected_types then 'selected="selected"' else ""#-->>$T('guessit-type-tv')</option>
                                <option value="2" <!--#if "2" in $selected_types then 'selected="selected"' else ""#-->>$T('guessit-type-date')</option>
                                <option value="3" <!--#if "3" in $selected_types then 'selected="selected"' else ""#-->>$T('guessit-type-movie')</option>
                                <option value="4" <!--#if "4" in $selected_types then 'selected="selected"' else ""#-->>$T('guessit-type-other')</option>
                            </select>
                        </div>
                        <div class="field-pair">
                            <label class="config" for="sort_cats_$cur">$T('affectedCat')</label>
                            <select name="sort_cats" multiple="multiple" class="multiple_cats" id="sort_cats_$cur" size="$len($categories)" required="required">
                                <!--#for $cat in $categories#-->
                                    <option value="$cat" <!--#if $cat.lower() in $slot.sort_cats then 'selected="selected"' else ""#-->>$Tspec($cat)</option>
                                <!--#end for#-->
                            </select>
                        </div>
                        <div class="field-pair advanced-settings">
                            <label class="config" for="min_size_$cur">$T('sort-minimum-size')</label>
                            <input type="text" name="min_size" value="$slot.min_size" id="min_size_$cur" size="10" required="required" />
                        </div>
                        <div class="field-pair advanced-settings">
                            <label class="config" for="multipart_label_$cur">$T('multiPartLabel')</label>
                            <input type="text" name="multipart_label" id="multipart_label_$cur" value="$slot.multipart_label" size="8" />
                        </div>

                        <div id="preview$cur" class="field-pair">
                            <label class="config" for="preview_name_$cur">$T('sort-test-data')</label>
                            <input type="text" id="preview_name_$cur" autocomplete="off" name="preview_name" placeholder="$T('orgJobname')" /><button class="btn btn-default clearBtn" type="button"><span class="glyphicon glyphicon-remove"></span> $T('button-clear')</button>
                        </div>
                        <div class="preview field-pair">
                            <label class="config">$T('sortResult')</label>
                            <span class="config desc path" id="preview_result_$cur"></span>
                        </div>

                        <!-- BUTTONS -->
                        <div class="field-pair no-field-pair-bg">
                            <button class="btn btn-default saveButton">
                                <!--#if $cur == 0#-->
                                    <span class="glyphicon glyphicon-plus"></span> $T('add-sorter')
                                <!--#else#-->
                                    <span class="glyphicon glyphicon-ok"></span> $T('button-saveChanges')
                                <!--#end if#-->
                            </button>
                            <!--#if $cur != 0#-->
                            <button class="btn btn-default delSorter" type="button">
                                <span class="glyphicon glyphicon-trash"></span> $T('remove-sorter')
                            </button>
                            <!--#end if#-->
                        </div>

                        <!-- PATTERN EXPLAINER -->
                        <div class="Key explain-pattern" id="pattern_explainer_$cur">
                            <hr>
                            <div class="field-pair no-field-pair-bg">
                                <label class="config">$T('sort-legenda')</label>
                                <table class="pattern-table">
                                    <thead>
                                        <tr>
                                            <th class="align-right">$T('sort-meaning')</th>
                                            <th>$T('sort-pattern')</th>
                                            <th>$T('sort-result')</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td class="align-right"><b>$T('sort-title'):</b></td>
                                            <td>%sn</td>
                                            <td>$T('movie-sp-name') / $T('show-sp-name') ($T('case-adjusted'))</td>
                                        </tr>
                                        <tr>
                                            <td>&nbsp;</td>
                                            <td>%s.n</td>
                                            <td>$T('movie-dot-name') / $T('show-dot-name') ($T('case-adjusted'))</td>
                                        </tr>
                                        <tr>
                                            <td>&nbsp;</td>
                                            <td>%s_n</td>
                                            <td>$T('movie-us-name') / $T('show-us-name') ($T('case-adjusted'))</td>
                                        </tr>
                                        <tr>
                                            <td class="align-right"><b>$T('sort-title'):</b></td>
                                            <td>%title &nbsp; %t &nbsp; %sN &nbsp;</td>
                                            <td>$T('movie-sp-name') / $T('show-sp-name')</td>
                                        </tr>
                                        <tr>
                                            <td>&nbsp;</td>
                                            <td>%.title &nbsp; %.t &nbsp; %s.N &nbsp;</td>
                                            <td>$T('movie-dot-name') / $T('show-dot-name')</td>
                                        </tr>
                                        <tr>
                                            <td>&nbsp;</td>
                                            <td>%_title &nbsp; %_t &nbsp; %s_N &nbsp;</td>
                                            <td>$T('movie-us-name') / $T('show-us-name')</td>
                                        </tr>
                                        <tr>
                                            <td class="align-right"><b>$T('Resolution'):</b></td>
                                            <td>%r</td>
                                            <td>1080p</td>
                                        </tr>
                                        <tr>
                                            <td class="align-right"><b>$T('year'):</b></td>
                                            <td>%y</td>
                                            <td>2021</td>
                                        </tr>
                                        <tr>
                                            <td class="align-right"><b>$T('decade'):</b></td>
                                            <td>%decade</td>
                                            <td>20</td>
                                        </tr>
                                        <tr>
                                            <td>&nbsp;</td>
                                            <td>%0decade</td>
                                            <td>2020</td>
                                        </tr>
                                        <tr>
                                            <td class="align-right"><b>$T('month'):</b></td>
                                            <td>%m</td>
                                            <td>1</td>
                                        </tr>
                                        <tr>
                                            <td>&nbsp;</td>
                                            <td>%0m</td>
                                            <td>01</td>
                                        </tr>
                                        <tr>
                                            <td class="align-right"><b>$T('day-of-month'):</b></td>
                                            <td>%d</td>
                                            <td>2</td>
                                        </tr>
                                        <tr>
                                            <td>&nbsp;</td>
                                            <td>%0d</td>
                                            <td>02</td>
                                        </tr>
                                        <tr>
                                            <td class="align-right"><b>$T('show-seasonNum'):</b></td>
                                            <td>%s</td>
                                            <td>1</td>
                                        </tr>
                                        <tr>
                                            <td>&nbsp;</td>
                                            <td>%0s</td>
                                            <td>01</td>
                                        </tr>
                                        <tr>
                                            <td class="align-right"><b>$T('show-epNum'):</b></td>
                                            <td>%e</td>
                                            <td>5</td>
                                        </tr>
                                        <tr>
                                            <td>&nbsp;</td>
                                            <td>%0e</td>
                                            <td>05</td>
                                        </tr>
                                        <tr>
                                            <td class="align-right"><b>$T('ep-name'):</b></td>
                                            <td>%en</td>
                                            <td>$T('ep-sp-name')</td>
                                        </tr>
                                        <tr>
                                            <td>&nbsp;</td>
                                            <td>%e.n</td>
                                            <td>$T('ep-dot-name')</td>
                                        </tr>
                                        <tr>
                                            <td>&nbsp;</td>
                                            <td>%e_n</td>
                                            <td>$T('ep-us-name')</td>
                                        </tr>
                                        <tr>
                                            <td class="align-right"><b>$T('extension'):</b></td>
                                            <td>%ext</td>
                                            <td>avi</td>
                                        </tr>
                                        <tr>
                                            <td class="align-right"><b>$T('orgFilename'):</b></td>
                                            <td>%fn</td>
                                            <td>$T('sort-File')</td>
                                        </tr>
                                        <tr>
                                            <td class="align-right"><b>$T('orgJobname'):</b></td>
                                            <td>%dn</td>
                                            <td>$T('orgJobname')</td>
                                        </tr>
                                        <tr>
                                            <td class="align-right"><b>$T('lowercase'):</b></td>
                                            <td>{$T('TEXT')}</td>
                                            <td>$T('text')</td>
                                        </tr>
                                    </tbody>
                                    <tbody class="advanced-settings">
                                        <tr>
                                            <th class="align-right"><b>$T('multiPartLabel')</b></th>
                                            <th>$T('sort-pattern')</th>
                                            <th>$T('sort-result')</th>
                                        </tr>
                                    </tbody>
                                    <tbody class="advanced-settings">
                                        <tr>
                                            <td class="align-right"><b>$T('partNumber'):</b></td>
                                            <td>%1</td>
                                            <td>1</td>
                                        </tr>
                                    </tbody>
                                    <tbody class="advanced-settings">
                                        <tr>
                                            <th class="align-right"><b>GuessIt</b></th>
                                            <th>$T('sort-pattern')</th>
                                            <th>$T('sort-result')</th>
                                        </tr>
                                    </tbody>
                                    <tbody class="advanced-settings">
                                        <tr>
                                            <td class="align-right"><b>$T('sort-guessitMeaning'):</b></td>
                                            <td>%GI&lt;$T('sort-guessitProperty')&gt;</td>
                                            <td>$T('guessit-sp-property')</td>
                                        </tr>
                                        <tr>
                                            <td class="align-right"><b></b></td>
                                            <td>%G.I&lt;$T('sort-guessitProperty')&gt;</td>
                                            <td>$T('guessit-dot-property')</td>
                                        </tr>
                                        <tr>
                                            <td class="align-right"><b></b></td>
                                            <td>%G_I&lt;$T('sort-guessitProperty')&gt;</td>
                                            <td>$T('guessit-us-property')</td>
                                        </tr>
                                        <tr>
                                            <td class="align-right"><b>$T('Example')</b></td>
                                            <td>%GI&lt;audio_codec&gt;</td>
                                            <td>DTS</td>
                                        </tr>
                                        <tr>
                                            <td class="align-right valign-top"><b>$T('Valid properties')</b></td>
                                            <td colspan=2>
                                                <!--#for $prop in $guessit_properties#-->
                                                $prop<br>
                                                <!--#end for#-->
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </fieldset>
                </div>
            </form>
        </div>
        <!--#end for#-->
    </div>

    <!--#if len($slotinfo) == 1 and ("tv" in $categories or "movies" in $categories)#-->
    <div class="section align-center sorting-quick-setup">
        <h3>$T('sort-quick-add'):</h3>
        <!--#if "tv" in $categories#-->
        <form action="save_sorter" method="post" autocomplete="off">
            <input type="hidden" name="apikey" value="$apikey" />
            <input type="hidden" name="order" value="0" />
            <input type="hidden" name="is_active" value="1" />
            <input type="hidden" name="name" value="">
            <input type="hidden" name="newname" value="$T('seriesSort')">
            <input type="hidden" name="sort_string" value="%sn/%sn - S%0sE%0e - %en.%ext">
            <input type="hidden" name="sort_cats" value="tv">
            <input type="hidden" name="sort_type" value="1">

            <p>
                <button class="btn btn-default saveButton">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                    $T('sort-quick-add-series')
                </button>
            </p>
        </form>
        <!--#end if#-->
        <!--#if "movies" in $categories#-->
        <form action="save_sorter" method="post" autocomplete="off">
            <input type="hidden" name="apikey" value="$apikey" />
            <input type="hidden" name="order" value="0" />
            <input type="hidden" name="is_active" value="1" />
            <input type="hidden" name="name" value="">
            <input type="hidden" name="newname" value="$T('movieSort')">
            <input type="hidden" name="sort_string" value="%title (%y)/%title (%y).%ext">
            <input type="hidden" name="sort_cats" value="movies">
            <input type="hidden" name="sort_type" value="3">
            <input type="hidden" name="multipart_label" value="CD%1">

            <p>
                <button class="btn btn-default saveButton">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                    $T('sort-quick-add-movies')
                </button>
            </p>
        </form>
        <!--#end if#-->
    </div>
    <!--#end if#-->
</div>
<script type="text/javascript" src="${root}staticcfg/js/jquery-ui.min.js"></script>
<script type="text/javascript">
    // http://stackoverflow.com/questions/2219924/
    var typewatch = (function(){
        var timer = 0;
        return function(callback, ms){
            clearTimeout (timer);
            timer = setTimeout(callback, ms);
        }
    })();

    // Put preset values into form fields
    function set_preset(sort_nr, sort_string, multipart_label, sample_data) {
        jQuery('#field_sort_string_' + sort_nr).val(sort_string);
        jQuery('#multipart_label_' + sort_nr).val(multipart_label);
        jQuery('#preview_name_' + sort_nr).val(sample_data);
        new_preview(sort_nr);
    }

    // Handle preview
    function new_preview(sort_nr) {
        var preview_sort_string = jQuery('#field_sort_string_' + sort_nr).val();
        if(preview_sort_string.length > 2) {
            typewatch(function () {
                jQuery.ajax({
                    type: "GET",
                    url: "../../api",
                    data: {
                        mode: 'eval_sort',
                        job_name: jQuery('#preview_name_' + sort_nr).val(),
                        sort_string: preview_sort_string,
                        multipart_label: jQuery('#multipart_label_' + sort_nr).val(),
                        apikey: '$apikey',
                        output: 'json'
                    },
                    success: function(data) {
                        jQuery('#preview_result_' + sort_nr).html(data.result);
                    },
                    error: function(data) {
                        jQuery('#preview_result_' + sort_nr).html('$T('button-failed')');
                    }
                });
            }, 500);
        }
    }

    jQuery(document).ready(function() {
        jQuery('.delSorter').click(function() {
            var theForm = jQuery(this).closest("form");
            theForm.attr("action", "delete").submit();
        });

        jQuery('.addSorter').click(function(){
            jQuery('#sorter_0').toggle();
        });

        jQuery('.showSorter').click(function () {
            var theParent = jQuery(this).closest("form")
            var theSwitch = theParent.find("button.showSorter")
            theParent.find(".col1").toggle();
            if (theSwitch.text().indexOf("$T('showDetails')") > 0) {
                theSwitch.html(theSwitch.html().replace("$T('showDetails')", "$T('hideDetails')"));
            } else {
                theSwitch.html(theSwitch.html().replace("$T('hideDetails')", "$T('showDetails')"));
            }
        });

        // Make the configured sorters sortable
        var hExtra = 8;
        jQuery(".sortables").sortable({
            items: ".sorter",
            placeholder: "sorter-placeholder",
            axis: "y",
            revert: 125,
            start: function(event, ui){
                hPlaceholder = ui.item.outerHeight();
                ui.placeholder.height(hPlaceholder + hExtra);
                jQuery('<div class="sorter-placeholder-anim" data-height="' + hPlaceholder + '"></div>').insertAfter(ui.placeholder);
            },
            cancel: "input,textarea,button,select,option,.pattern-table",
            change: function(event, ui) {
                ui.placeholder.stop().height(0).animate({
                    height: ui.item.outerHeight() + hExtra
                }, 250);
                hPlaceholderAnim = parseInt(jQuery(".sorter-placeholder-anim").attr("data-height"));
                jQuery(".sorter-placeholder-anim").stop().height(hPlaceholderAnim + hExtra).animate({
                    height: 0
                }, 250, function() {
                    jQuery(this).remove();
                    hPlaceholder = ui.item.outerHeight();
                    jQuery('<div class="sorter-placeholder-anim" data-height="' + hPlaceholder + '"></div>').insertAfter(ui.placeholder);
                });
            },
            stop: function(event, ui) {
                jQuery(".sorter-placeholder-anim").remove();
            },
            // Save the config after re-ordering
            update: function(event, ui) {
                jQuery('.Sorting form.sorting-row').each(function(index, elm) {
                    // Update order of all elements
                    if(index !== elm.order.value) {
                        elm.order.value = index
                        // Submit changed order
                        var data = {}
                        jQuery(elm).extractFormDataTo(data);
                        jQuery.ajax({
                            type: "GET",
                            url: window.location.pathname + 'save_sorter',
                            data: data,
                            async: false // To prevent race-conditions when updating sorters
                        })
                    }
                })
            }
        })

        // On|Off switch for a configured sorter
        jQuery('.toggleSorterCheckbox').click(function(){
            var whichSorter = jQuery(this).attr("rel");
            jQuery.ajax({
                type: "POST",
                url: "toggle_sorter",
                data: {sorter: whichSorter, apikey: "$apikey" }
            }).done(function() {
                formWasSubmitted = true;
                formHasChanged = false;
                location.reload();
            });
        });

        <!--#for $cur, $slot in enumerate($slotinfo)#-->
        // Preview the result of the sort string against a sample jobname
        jQuery('#field_sort_string_$cur, #field_sort_type_$cur, #multipart_label_$cur, #preview_name_$cur').bind("keyup focus", function() {
            new_preview($cur);
        });
        new_preview($cur);
        <!--#end for#-->

        jQuery('.clearBtn').click(function(){
            jQuery(this).prev().val('').focus();
        });
    });
</script>

<!--#include $webdir + "/_inc_footer_uc.tmpl"#-->
