{% extends "base.html" %}

{% block title %}Settings for {% if choice == "saved_show" %}{{show.seriesname}}{% else %}{{request.args.name}}{% endif %}{% endblock %}

{% block container %}
<div class="row">
    <div class="span11 left">
      <div class="white-panel">

        <div class="page-header">
            {% if choice == "saved_show" %}
            <h2>Settings for {{show.seriesname}}</h2>
            {% else %}
            <h2>Settings for {{request.args.name}}</h2>
            {% endif %}
        </div>

        <div class="alert alert-error hide">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <strong>Warning!</strong> Best check yo self, you're not looking too good.
        </div>


        <form id="id_form_add_show" name="form_add_show" class="form-horizontal" method="POST" action=".">

            <input type="hidden" name="tvdb_id" value="{{show_id}}">
            <input type="hidden" name="filters" value="">
            {% if choice == "existing" %}
            <input type="hidden" name="folder" value="{{request.args.folder}}">
            <div class="control-group">
                <label class="control-label" for="folder">Folder:</label>
                <div class="controls">
                    <strong>{{request.args.folder}}</strong>
                </div>
            </div>
            {% elif choice == "saved_show" %}
            <div class="control-group">
                <label class="control-label" for="folder">Folder:</label>
                <div class="controls">
                    <input id="id_folder" class="span3" type="text" name="folder" value="{{show.folder}}" placeholder="Select folder" readonly="true"/>
                    <button type="button" id="id_browse" class="btn"><i class="icon-search"></i> Browse</button>
                </div>
            </div>            
            {% else %}
            <div class="control-group">
                <label class="control-label" for="folder">Folder:</label>
                <div class="controls">
                    <input id="id_folder" class="span3" type="text" name="folder" placeholder="Select folder" readonly="true"/>
                    <button type="button" id="id_browse" class="btn"><i class="icon-search"></i> Browse</button>
                </div>
            </div>
            {% endif %}
            <div class="control-group">
                <div class="controls">
                    <h5>Only download items matching the following rules:</h5>
                </div>
            </div>                
            <div class="control-group">
                <label class="control-label">Rules:</label>
                <div class="controls">
                
                <table id="id_table_filters" class="table table-bordered" style="width:500px;">    
                  <tbody>
                    <tr class="filter-form">                
                      <td>
                        <select id="id_key" name="key" class="input-medium">
                            <option value="size">Size in MB</option>
                            <option value="name">Name</option>
                            <option value="peers">Number of peers</option>
                            <option value="seeds">Number of seeders</option>
                        </select>
                      </td>
                      <td>
                        <select id="id_operator" name="operator" class="input-medium">
                            <option value="gt">Greater then</option>
                            <option value="st">Smaller then</option>
                        </select>
                      </td>
                      <td>
                        <div class="control-group" style="margin-bottom:0px;">
                            <input type="text" id="id_filter_value" class="input-medium" name="value" placeholder="Value..." />
                        </div>
                      </td>
                      <td>
                        <div class="btn-group">
                            <button class="btn disabled btn-mini" disabled="disabled"><i class="icon-minus"></i></button>
                            <button id="id_add_filter" type="button" class="btn btn-mini"><i class="icon-plus"></i></button>
                        </div>
                      </td>
                    </tr>           
                  </tbody>
                </table>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">Other options:</label>
                <div class="controls">
                    <label class="checkbox">
                        {% if choice == "saved_show" %}
                        <input type="checkbox" name="use_season_folders" {% if show.use_season_folders %}checked{% endif %}>
                        {% else %}
                        <input type="checkbox" name="use_season_folders" {% if settings.use_season_folders %}checked{% endif %}>
                        {% endif %}
                         Use season folders
                    </label>
                    <label class="checkbox">
                        {% if choice != "saved_show" %}
                        <input type="checkbox" name="download_new_only" {% if settings.download_new_only %}checked{% endif %}>
                        Only download new episodes <em>(Skip aired episodes)</em>
                        {% endif %}
                        
                    </label>
                </div>
            </div>
            <div class="control-group">
                <div class="controls">
                    <button type="submit" class="btn btn-success">
                        <i class="icon-ok icon-white"></i> {% if choice == "saved_show" %}Save  {% else%}Add show{% endif%}
                    </button>
                    {% if choice == "saved_show" %}
                    <a class="btn" href="/show/{{show.id}}/">
                        <i class="icon-remove"></i> Cancel
                    </a>
                    {% endif %}
                </div>
            </div>

        </form>
        </div>
    </div>
</div>
        
    {% include "modal_browse.html" %}

{% endblock %}

{% block script %}

<script id="filter-template" type="text/x-handlebars-template">
{% raw %}
<tr data-filter='{"key":"{{key}}","operator":"{{operator}}","value":"{{value}}"}'>                
  <td><em>{{keyFull}}</em></td>
  <td><em>{{operatorFull}}</em></td>
  <td><em>{{value}}</em></td>
  <td>
    <div class="btn-group">
        <button type="button" class="btn btn-mini action_remove_filter"><i class="icon-minus"></i></button>
        <button class="btn btn-mini disabled" disabled="disabled"><i class="icon-plus"></i></button>
    </div>
  </td>
</tr>
{% endraw %}
</script>

<script>
var operators = {
    eq : "Equals",
    ne : "Not equal to",
    gt : "Greater then",
    st : "Smaller then",
    startswith : "Begins with",
    not_startswith : "Does not begin with",
    "in" : "Contains",
    not_in : "Does not contain"
};

var keys = {
    "name": {
        description : "Name",
        operators : ["in","not_in","startswith","not_startswith"],
        type : "string"
    },
    "size": {
        description : "Size in MB",
        operators : ["gt","st","eq"],
        type : "int"
    },
    "peers": {
        description : "Number of peers",
        operators:["gt","st","eq"],
        type : "int"
    },
    "seeds": {
        description : "Number of seeders",
        operators:["gt","st","eq"],
        type : "int"
    }
};

$('#id_browse').on('click',function(e){
    e.preventDefault();
    filePicker({ 
            startPath : '', 
            show : true
        }, 
        function(folder){ 
            $('input[name=folder]').val(folder);
        }
    );  
});

$('#id_form_add_show').submit(function() {
    $('div.alert').addClass('hide');
    //
    $('#id_folder').parents('.control-group').removeClass('error');
    if($('input[name="folder"]').val().length == 0){
        var msg = "<strong>Please select a folder</strong>";
        $('#id_folder').parents('.control-group').addClass('error');
        $('div.alert').html(msg).removeClass('hide');
        return false;
    }

    // Save filters
    var filters =[];
    $("#id_table_filters tr").each(function(){
        if($(this).attr('data-filter')){
            filters.push(JSON.parse($(this).attr('data-filter')));
        }
    });
    $('input[name=filters]').val(JSON.stringify(filters));

    return true;
});

$("#id_table_filters").delegate("select#id_key", "change", function(e) {
    var val = $('#id_key').val();
    $('#id_operator option').remove();
    $.each(keys[val].operators, function(index, value) {
        var html = '<option value="' + value + '">' + operators[value] + '</option>';
        $('#id_operator').append(html);
    });
});

$("#id_table_filters").delegate("button#id_add_filter", "click", function(e) {
    var key = $('#id_key').val();
    var op = $('#id_operator').val();
    var val = $('#id_filter_value').val();

    // Validate if value is given
    $('#id_filter_value').parent().removeClass("error");
    if(val.length == 0){
        $('#id_filter_value').parent().addClass("error");
        return;        
    }
    
    // Validate if value is numeric when datatype is int
    if(keys[key].type == "int" && !/^\d+$/.test(val)){
        $('#id_filter_value').parent().addClass("error");
        $('#id_filter_value').val("");
        $('#id_filter_value').attr("placeholder","Needs to be a number");      
        return;
    }

    addFilter({key:key, value:val, operator:op});
    $('#id_filter_value').val("");
    $('#id_filter_value').attr("placeholder","Value...");

});
$("#id_table_filters").delegate("button.action_remove_filter", "click", function(e) {
    $(this).parents('tr').remove();
});



function addFilter(filter){
    var source   = $("#filter-template").html();
    var template = Handlebars.compile(source); 

    filter.operatorFull = operators[filter.operator];
    filter.keyFull = keys[filter.key].description;
    $('tr.filter-form').before(template(filter));
}

{% if choice == "saved_show" %}
var filters = {{show.filters|safe}};
$.each(filters, function(index,filter){
    addFilter(filter);
});
{% endif %}

</script>
{% endblock %}