@using NzbDrone.Core.Repository.Quality
@using NzbDrone.Web.Helpers;
@model NzbDrone.Web.Models.QualityModel

@{
    Layout = "_SettingsLayout.cshtml";
}

<div id="stylized">
    @using (Html.BeginForm("SaveQuality", "Settings", FormMethod.Post, new { id = "QualityForm", name = "QualityForm", @class = "settingsForm" }))
    {
        <div id="top">
            <label class="labelClass">@Html.LabelFor(m => m.DefaultQualityProfileId)
                <span class="small">@Html.DescriptionFor(m => m.DefaultQualityProfileId)</span>
            </label>
            @Html.DropDownListFor(m => m.DefaultQualityProfileId, Model.QualityProfileSelectList, new { @class = "inputClass" })
        </div>
        
        <div class="jquery-accordion">
            <h3>
                <a href="#">Profiles</a></h3>
            <div id="profileContainer">
                <div id="profiles">
                </div>
            </div>
            <h3>
                <a href="#">Size Limits</a></h3>
            <div class="sliders">
                <div class="infoBox">
                    Size Limits specify the maximum download size NzbDrone will send to your download client.
                </div>
                <div class="slider-container">
                    <b>SDTV</b>
                    <div id="sdtv-slider" class="slider">
                    </div>
                    @Html.HiddenFor(m => m.SdtvMaxSize, new { @class = "slider-value" })
                    30 minute size: <span class="30-minute"></span>MB | 60 minute size: <span class="60-minute">
                                                                                        </span>MB
                </div>
                <div class="slider-container">
                    <b>DVD</b>
                    <div id="dvd-slider" class="slider">
                    </div>
                    @Html.HiddenFor(m => m.DvdMaxSize, new { @class = "slider-value" })
                    30 minute size: <span class="30-minute"></span>MB | 60 minute size: <span class="60-minute">
                                                                                        </span>MB
                </div>
                <div class="slider-container">
                    <b>HDTV</b>
                    <div id="hdtv-slider" class="slider">
                    </div>
                    @Html.HiddenFor(m => m.HdtvMaxSize, new { @class = "slider-value" })
                    30 minute size: <span class="30-minute"></span>MB | 60 minute size: <span class="60-minute">
                                                                                        </span>MB
                </div>
                <div class="slider-container">
                    <b>WEBDL-720p</b>
                    <div id="webdl-slider" class="slider">
                    </div>
                    @Html.HiddenFor(m => m.Webdl720pMaxSize, new { @class = "slider-value" })
                    30 minute size: <span class="30-minute"></span>MB | 60 minute size: <span class="60-minute">
                                                                                        </span>MB
                </div>
                <div class="slider-container">
                    <b>Bluray 720p</b>
                    <div id="bluray720p-slider" class="slider">
                    </div>
                    @Html.HiddenFor(m => m.Bluray720pMaxSize, new { @class = "slider-value" })
                    30 minute size: <span class="30-minute"></span>MB | 60 minute size: <span class="60-minute">
                                                                                        </span>MB
                </div>
                <div class="slider-container">
                    <b>WEBDL-1080p</b>
                    <div id="webdl-slider" class="slider">
                    </div>
                    @Html.HiddenFor(m => m.Webdl1080pMaxSize, new { @class = "slider-value" })
                    30 minute size: <span class="30-minute"></span>MB | 60 minute size: <span class="60-minute">
                                                                                        </span>MB
                </div>
                <div class="slider-container">
                    <b>Bluray 1080p</b>
                    <div id="bluray1080p-slider" class="slider">
                    </div>
                    @Html.HiddenFor(m => m.Bluray1080pMaxSize, new { @class = "slider-value" })
                    30 minute size: <span class="30-minute"></span>MB | 60 minute size: <span class="60-minute">
                                                                                        </span>MB
                </div>
            </div>
        </div>
        <br />
        <button type="submit" class="save_button" disabled="disabled">
            Save</button>
    }
</div>

@section Scripts {
    @Html.IncludeScript("NzbDrone/qualitySettings.js")

    <script type="text/javascript">
        $(document).ready(function() {
            setupSliders();
        });

        $('.quality-selectee').livequery(function() {
            $(this).button();
        });
    </script>
    
    @Html.IncludeScript("backbone/apps/qualityProfileApp.js")
    @Html.IncludeScript("backbone/constants.js")
    @Html.IncludeScript("backbone/models/qualityProfile.js")
    @Html.IncludeScript("backbone/models/qualityProfileCollection.js")
    @Html.IncludeScript("backbone/views/qualityProfiles.js")
    @*@Html.IncludeScript("backbone/bootstrapper.js")*@

    <script id="QualityProfileTemplate" type="text/template">
        <a href="#" class="remove-profile"><i class="icon-remove"></i></a>
        <div class="quality-profile-setting">
            <label>Name</label>
            <input type="text" value="<%= Name %>" class="name" />
        </div>
        <div class="quality-profile-setting">
            <label>Cutoff</label>
            <select class="cutoff">
            <% _.each(Qualities, function(quality) { %>
                <% if (quality.Allowed === true) { %>
                    <option value="<%= quality.Id %>" <%= quality.Id === Cutoff ? 'selected="selected"' : '' %>><%= quality.Name %></option>
                <% } %>
            
            <% }); %>
            </select>
        </div>

        <% _.each(Qualities, function(quality) { %>
            <input id="<%= Id %>_<%= quality.Id %>"
                    class="quality-selectee"
                    type="checkbox"
                    value="<%= quality.Allowed %>"
                    data-quality-id="<%= quality.Id %>"
                    <%= quality.Allowed ? 'checked="checked"' : '' %>
            />
            <label for="<%= Id %>_<%= quality.Id %>"><%= quality.Name %></label>
        <% }); %>
    
    
    </script>
    
    <script id="QualityProfileCollectionTemplate" type="text/template">
        <div id="profileHeader">
            @*<button id="add-profile"><i class="icon-plus icon-large"></i> Add New Profile</button>*@

            <a id="add-profile" href="@Url.Action("AddProfile", "Settings")">
                <i class="icon-plus icon-large"></i>
                Add New Profile
            </a>
        </div> 
    </script>
    
    <script>
        $(document).ready(function() {
            QualityProfileApp.App.start();
        });
    </script>
}