{extends file='base.tpl'}




{block name="css_base"}
{/block}    

{block name="css"}

<style type="text/css">
    {literal}
			* {
				font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
			}
			
			body {
				margin: 0;
				pading: 0;
				color: #fff;
				background: url('img/bg-login.png') repeat #1b1b1b;
				font-size: 14px;
				text-shadow: #050505 0 -1px 0;
				font-weight: bold;
			}
			
			li {
				list-style: none;
			}
			
			#dummy {
				position: absolute;
				top: 0;
				left: 0;
				border-bottom: solid 3px #777973;
				height: 250px;
				width: 100%;
				background: url('img/bg-login-top.png') repeat #fff;
				z-index: 1;
			}
			
			#dummy2 {
				position: absolute;
				top: 0;
				left: 0;
				border-bottom: solid 2px #545551;
				height: 252px;
				width: 100%;
				background: transparent;
				z-index: 2;
			}
			
			#login-wrapper {
				margin: 0 0 0 -160px;
				width: 320px;
				text-align: center;
				z-index: 99;
				position: absolute;
				top: 0;
				left: 50%;
			}
			
			#login-top {
				height: 120px;
				padding-top: 140px;
				text-align: center;
				color: red
			}
			
			label {
				width: 70px;
				float: left;
				padding: 8px;
				line-height: 14px;
				margin-top: -4px;
			}
			
			input.text-input {
				width: 200px;
				float: right;
				-moz-border-radius: 4px;
                -webkit-border-radius: 4px;
				border-radius: 4px;
				background: #fff;
				border: solid 1px transparent;
				color: #555;
				padding: 8px;
				font-size: 13px;
			}
			
			input.button {
				float: right;
				padding: 6px 10px;
				color: #fff;
				font-size: 14px;
				background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#a4d04a), to(#459300));
				text-shadow: #050505 0 -1px 0;
				background-color: #459300;
				-moz-border-radius: 4px;
                -webkit-border-radius: 4px;
				border-radius: 4px;
				border: solid 1px transparent;
				font-weight: bold;
				cursor: pointer;
				letter-spacing: 1px;
			}
			
			input.button:hover {
				background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#a4d04a), to(#a4d04a), color-stop(80%, #76b226));
				text-shadow: #050505 0 -1px 2px;
				background-color: #a4d04a;
				color: #fff;
			}
			
			div.error {
				padding: 8px;
				background: rgba(52, 4, 0, 0.4);
				-moz-border-radius: 8px;
                -webkit-border-radius: 8px;
				border-radius: 8px;
				border: solid 1px transparent;
				margin: 6px 0;
			}
			.header-middle-div {
				    height: 206px;
					margin: 0 auto;
					width: 1000px;
			}
			.left-logo{
				float: left;
				background-image: url('../img/left_logo.png');
				background-repeat: no-repeat;
				width: 202px;
				height:175px;
				margin-top:15px;
				background-size: 121px
			}
			.right-logo{
				    float: left;
					background-image: url('../img/right_logo.png');
					width: 164px;
					height: 156px;
					margin-top: 15px;
					margin-left: 28px;
			}
			.slogan{
				float: left;
				height:206px;
				color: #356190;
				font-size: 22px;
				padding-top: 65px;
				text-align: center;

			}
			.geo-slogan{
				    padding: 5px;
					border-bottom: 2px solid #356190;
					font-size: 24px;
			}
			.eng-slogan{
				    text-transform: uppercase;
					letter-spacing: 0.1px;
					margin-top: 10px;
					float: left
			}

			.MY_TITLE{
				    font-size: 37px !important;
				    color: #000 !important;
				}
                        {/literal}
		</style>		
{/block}
{block name="top"}
{/block}
{block name="left"}
{/block}
		
{block name="scripts"}
	<script>
	function ins_form(){
		var message = document.getElementById("error_message");
		var ret = true;
		var inp = document.getElementsByTagName("input");
		for(var i = 0; i < inp.length; i++){
			if(!inp[i].value.length){
				message.innerHTML = "შეავსეთ ყველა ველი";		
				return false;
			}
		}
		return ret;	
	}

	</script>
{/block}		
		
{block name="body"}
  
	
		
		<div id="login-wrapper" class="png_bg">
			<div id="login-top">
				<div id="error_message">{if isset($smarty.session.message_info)}{$smarty.session.message_info}{/if}</div>	
			</div>
			
			<div id="login-content">
                <form method="post" onsubmit="return ins_form();" style="width: 348px">					
					<p>
						<label>მომხმარებელი</label>
						<input value="" name="username" class="text-input" type="text" />
					</p>
					<br style="clear: both;" />
					<p>
						<label>პაროლი</label>
						<input name="password" class="text-input" type="password" />
						{if isset($smarty.session.need_captcha) and $smarty.session.need_captcha >= 3}	
							</p>
							<br style="clear: both;" />
							<p>
								<label></label>
								<img src="/captcha/captcha.php" id="captcha" /><br/>
								<a href="#" onclick="
							    document.getElementById('captcha').src='/captcha/captcha.php?'+Math.random();
							    document.getElementById('captcha-form').focus();"
							    id="change-image">Change text.</a>
							</p>
							<p>
								<label>დამცავი კოდი</label>
								<input name="captcha" class="text-input" type="text" />
							</p>
						{/if}	

					<br style="clear: both;" />
					<p>
						<input class="button" type="submit" value="შესვლა" />
					</p>					
				</form>
			</div>
		</div>
		<div id="dummy">
		<div class="header-middle-div container hidden-xs hidden-sm hidden-md">
            <div class="left-logo"></div>
            <div class="slogan col-lg-8 MY_TITLE">
                  <div><span class="geo-slogan">ხარაგაულის მუნიციპალიტეტი</span></div>
                    <div><span class="eng-slogan">MUNICIPALITY OF KHARAGAULI</span></div>
            </div>
            <div class="right-logo"></div>
        </div>
		</div>
		<div id="dummy2"></div>
{/block}
 {block name="footer"}{/block}