@using NzbDrone.Web.Helpers
@model NzbDrone.Web.Models.NotificationSettingsModel
           
@section HeaderContent{
    <link rel="stylesheet" type="text/css" href="/Content/Settings.css" />

    <style>
        .notifier
        {
            width: 560px;
            border:solid 2px #CCCCCD;
            padding: 5px;
            margin-left: -8px;
        }
        
        .notifier h4
        {
            font-weight: bold;
            margin-bottom: 0px;
            padding-left: 5px;
            padding-top: 3px;
        }
        
        .notifierLine
        {
            font-size:11px;
            color:#666666;
            margin-bottom:20px;
            border-bottom:solid 1px #CCCCCD;
            padding-bottom:10px;
        }
        
        #save_button
        {
            margin-top: 10px;
        }
    </style>
}

@section TitleContent{
    Settings
}

@section ActionMenu{
    @{Html.RenderPartial("SubMenu");}
}

@section MainContent{
    <div id="stylized">
        @using (Html.BeginForm("SaveNotifications", "Settings", FormMethod.Post, new { id = "form", name = "form", @class = "settingsForm" }))
        {
            <h1>Notifications</h1>
            <p></p>
            
            <div id="tabs">
	            <ul>
		            <li><a href="#tabs-xbmc">XBMC</a></li>
		            <li><a href="#tabs-smtp">SMTP</a></li>
                    <li><a href="#tabs-twitter">Twitter</a></li>
	            </ul>
	            <div id="tabs-xbmc">
                    @{Html.RenderPartial("Xbmc", Model);}
	            </div>
	            <div id="tabs-smtp">
		            @{Html.RenderPartial("Smtp", Model);}
	            </div>
                <div id="tabs-twitter">
                    @{Html.RenderPartial("Twitter", Model);}
	            </div>
            </div>
            
            <button type="submit" id="save_button" disabled="disabled">Save</button>
        }
    </div>
}

@section Scripts{
    <script src="/Scripts/settingsForm.js" type="text/javascript"></script>

    <script>
        $(function () {
            $("#tabs").tabs();
        });
	</script>
}