{% extends 'default/base.html' %}

{% block title %}{{ _("Config") }} - {{ super() }} {% endblock %}
{% block subtitle %}{{ _("Config") }}{% endblock %}

{% block head %}
<link href="static/css/default/settings.less" rel="stylesheet/less" type="text/css" media="screen"/>
	

{% endblock %}

{% block content %}
<div class="container-fluid">
	<div class="row-fluid">
		<div class="span2">
			<div class="setmenu" style="max-width: 340px; padding: 8px 0;">
				<ul class="nav nav-list" >
					<li class="nav-header">{{ _("General")}}</li>
						<li class="active"><a href="#">Example Settings</a></li>
						<li><a href="#">General blabla</a></li>
						<li><a href="#">General blabla</a></li>
						<li><a href="#">General blabla</a></li>
						<li><a href="#">General blabla</a></li>
					<li class="nav-header">{{ _("User")}}</li>
						<li><a href="#">User blaba</a></li>
						<li><a href="#">User blab la</a></li>
						<li><a href="#">User blabal</a></li>
					<li class="nav-header">{{ _("Addons")}}</li>
						<li><a href="#">Addons balba</a></li>
						<li><a href="#">Addons balbal</a></li>
					<li class="nav-header">{{ _("Accounts")}}</li>
						<li><a href="#">Accounts blabal </a></li>
						<li><a href="#">Accounts bala</a></li>
						<li><a href="#">Accounts blabla</a></li>
						<li><a href="#">Accounts nalai</a></li>
					<li class="divider"></li>
					<li class="nav-header">{{ _("Admin")}}</li>
						<li><a href="#">User Übersicht</a></li>
						<li><a href="#">User hinzufügen</a></li>
				</ul>
			</div>
		</div>
		<!-- Info Popup -->
			<div class="modal" id="info" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
					<h3>Info Popup</h3>
				</div>
				<div class="modal-body">
					<h4>General</h4>
          <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>
					
					<h4>And...</h4>
					<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
          <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
          <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
          <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
          <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
          <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
				</div>
				<div class="modal-footer">
					<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
				</div>
			</div>
		<div class="span10" style="margin-top: 10px ">
			<div class="hero-unit">
			  <h1>Example Settings</h1>
			  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</p>
			  <p>
			    <a class="btn  btn-primary btn-large" role="button" href="#info" data-toggle="modal">Learn more</a>
			  </p>
			</div>
	
			
	
			
			<div class="well" style="margin-top: 10px "> 
				<form class="form-horizontal">
					<div class="control-group">
						<label class="control-label">Max Parallel Downloads</label>
						<div class="controls">
							<input id="in_mpd" type="text" placeholder="3">
						</div>
					</div>
					<div class="control-group">
						<label class="control-label">Limit Download Speed</label>
						<div class="controls">
		          <div class="btn-group" data-toggle="buttons-radio">
		            <button type="button" class="btn bnmaxspeed" id="onmaxspeed">On</button>
		            <button type="button" class="btn bnmaxspeed active" id="offmaxspeed">Off</button>
		          </div>
							<div id="downloadspeed" style="display:none">
								<label>Max Download Speed in kb/s</label>
								<input type="text" placeholder="Tipp etwas ...">
							</div>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label">Allow IPv6</label>
						<div class="controls">
							<div class="btn-group" data-toggle="buttons-radio">
		            <button type="button" class="btn bnip6" id="onip6">On</button>
		            <button type="button" class="btn bnip6 active" id="offip6">Off</button>
		          </div>
	        	</div>
	        </div>
				</form>
				    <div class="form-actions">
    					<button type="submit" class="btn btn-primary">Änderungen Speichern</button>
   						<button type="button" class="btn">Abbrechen</button>
  				  </div>
			</div>
		</div>
	</div>
</div>
<script src="static/js/libs/jquery-1.8.0.js"></script>
<script src="static/js/libs/bootstrap-2.1.1.js"></script>
	<script type="text/javascript">
		
   $(".bnmaxspeed").click(function () {    
			$(".bnmaxspeed").removeClass("active");
   		 $(this).toggleClass("active");
   	 if($("#onmaxspeed").hasClass("active"))
   	 {
        $("#downloadspeed").show();
   	 }
   	 else
   	 {
        $("#downloadspeed").hide();
   	 }
   
   });
    $(".bnip6").click(function () {
    	$(".bnip6").removeClass("active");
    	$(this).toggleClass("active");
    });
    	$('#info').modal('toggle');
    	
   		$('#in_mpd').tooltip({
   		placement:'right',
   		title:'Gib an wie viele Downloads gleichzeitg laufen dürfen.'
   		});



	</script>
{% endblock %}