{% set nrologin = random() %} 

{% extends "base.html" %}

{% block metatag %}
    <title>Login: veja seus pedidos de mudança | Muda Muda</title>
    <meta name="description" content="Faça o login para acessar a área da sua empresa. Através dele você poderá ver os seus pedidos de orçamento e visualizar ou editar as informações sobre a sua empresa.">
{% endblock %}

{# remove o link #}
{% block link_login %} <li><span class="linkfixo">LOGIN</span></li> {% endblock %}


{% block scriptsCSS %}
	<style>
		.banner-add{
			width: 400px;
			border: 1px solid black;
			margin: 50px auto 0;
		}
		.banner-add-mobile{
			display: none;
			width: 80%;
		}

		.form-content-input {
			width: 100%;
			display: flex;
			display: -webkit-flex;
			background-color: #EBEBEB;			
		}

		.form-content-input input {
			flex:1;
			background-color: rgba(0,0,0,0)!important;
			margin-top: 0;
		}

		.form-content-input .bt-icon {
			flex:none;
			background-color: #EBEBEB;
			height: 34px;
			width: 34px;

			display: flex;
			display: -webkit-flex;

			justify-content: center;
			-webkit-justify-content: center;
			align-items: center;
			-webkit-align-items: center;

			cursor: pointer;
		}

		@media screen and (max-width: 500px) {
			.banner-add{
				width: 85%;
				margin: 0 auto 20px;
			}
			.banner-add-desktop{ display: none; }
			.banner-add-mobile{ display: block; }
		}
	</style>
{% endblock %}

{% set srcOpenEye = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAACgklEQVR4nO2Yy0uVQRTAf3Y1IrLoJZciaFemYER/QEGQi7JaRAtBEm7LVpG0iAjKlVFREkS1UKGCqF30pCdtgwohiIKWQVhUC0vtxpFzYRw+9cx1vPcG84MDH9+d8/pm5syZC4lEIpFIJFgPdAH9wGPgIzACjKvI8wfgEXAB6ATWVfu7rQWOA2+AYpnyGjgG5CsZeAtwQ79sMZL8AQaBjfMZ+GrgCjCREcAocB84AewCmoHlQA6o12dJvAM4qUvpd4Yd+SiXgBWxg98HfM1wKMunG2gsw+YyoAAMZ9j9AuyOEXi9bjrfwRNgRwwHQB3QDrzI8HNWZ7EsGnWqXYNSTQ4yP9QBh4Dvns97wOJQY0uBV56huxWqFmuAB57v58ASq4GFWstdA5eNU5nT/SIV5T3wS0WeB4C9wALj0r3mxSBFosGSwFVPUSqLhe3AO0PJfAtsMy6pU56uVKgZ6fQU+ozBHwbGAur+mOpYOO/pHphuYF43aWngQ+Oy6ZrDAVYw2M/pRnYLSVPWwOvOoE96+MzGBj3Eyk1gVG3Mxkrgs6Mne2wKbcBfZ4BsRAt3IrQRt42+9js60g20uj/ecn58ajSYn6atCJWJgPLsHnY33bpb2oAyC1uMxgoRgi8G7AVhq9cATiZ+1Hn5DDt9ERM4E+DXnYUj8uKl8yKkTRiImMBQgN9uR0+SmTwpS63sqgBDFyMm0B/Y1pfuIj/lxWngh556IfRETKAn0HevBh8a8xQ2R0ygjSqRdRkJlWGqyJ4ICXRQZYbmEPwgNcCijJubRURHdGsCuYCcM/7VMq53XdGpOVp0SX3LCHxEl8wm/gMatFvcqdJqvQ4mEolEIpFIUDn+AdKF4BAr0NyzAAAAAElFTkSuQmCC" %} 

{% set srcCloseEye = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAB7ElEQVR4nO3WTYhOURgH8J93jMZHU5rdNGkUC7LBZhBRwoqFlSwoRVnayEJSokaNUtIo8pWFLGVnQ1nYjqSkfKRZqMH4JjM69UzdLu/r3ve970Lef52695zn/J/nPOc8H3TQQTmswnHcxWO8xyc8xX2MYBNmqxBd2ItnmC443uAw5rWqfC0eZYhf4Cy2YRl6Q8kSbMRJjGXkX2Nns8r341sQPY//WsG963AvY8ho2WsZwNvYfBrdTRxgFg7GISaxvCzBEHZpHckbGyrg6eA/wXysbiP/CvTXWxzEeGSxvjYonxPpO6Xu9fWE7kTs34o4rhLDwT3WKK8MZhLQ0QqV78YUvkd+aYjNIZiMOFKR8h/Bt6/IhlqU25k8fg0LmlDcHW6fCp6HRa61houx4TM+xPcr7ClYExLH9nhw03H6r/F9rpERXbgagh+jsViKBxlvpCg5gx3xXlLYzo3ilUr0iVzf8ARrsBVf/mbEoRCYzBWPJHysRDMyM87nPJY1InnzN/TgZjQhedyIjdczLdnLzP2OR/0fjtqf5m7/gWcLLoW3C2MgoiKNRbm1iVC2MDPXFyf9icUqwEgoSe9DAQMSrsT8qVaV9+JdkK0sYcBQpjlNV9s0enAAF+qs1zMg4XJ006kGtA0TDQzo4N/AL70bmChzgymIAAAAAElFTkSuQmCC" %} 

{% block conteudo %}

<form name="formLoginParceiro" id="formLoginParceiro" action="{{ path_for('login') }}" method="POST" class="Grid formulario-geral formulario-login" style="text-align:left;">

	<div class="view-alert">
		<div class="bt-close-view-alert" onclick="alternaViewAlert()">x</div>
		<p></p>
	</div>

	<div class="login-txts">
		<h2 class="tit-interno" style="margin:0 0 10px 0;">Faça login para acessar a área da sua empresa.</h2>
		<p>Você poderá ver os seus pedidos de orçamento ou editar as informações e dados sobre a sua empresa.</p>
	</div>
	
	<div class="Grid-cell bloco-grid-fix total">
		<label for="login-cnpj-{{nrologin}}" class="formulario-txts-label">Login (CNPJ)</label>
		<input type="text" name="login-cnpj-{{nrologin}}" id="login-cnpj-{{nrologin}}" class="formulario-cadastro-campo formulario-campos formulario-txt" placeholder="CNPJ da empresa (somente números)" data-aceito="cnpj" data-aceito-min="18" data-required="{% if CNPJ=='' %}true{% else %}false{% endif %}" maxlength="18" autocomplete="new-input"  data-mask="00.000.000/0000-00" data-mask-reverse="true" value="{{CNPJ}}">
	</div>	

	<div class="Grid-cell bloco-grid-fix total" style="margin-top: 15px;">
		<label for="login-senha" class="formulario-txts-label">Senha</label>
		<div class="form-content-input">
			<input type="password" name="login-senha" id="login-senha" class="formulario-cadastro-campoX formulario-campos formulario-txt" placeholder="Digite sua senha (mínimo de 6 caracteres)" data-aceito-min="6" data-required="true" autocomplete="new-password">
			<div class="bt-icon" onclick="togglePass()">
				<!-- <img src="{{ __BASEHTML__ }}img/eye-password-hide.svg" width="18" height="auto" alt="Mostrar senha"> -->
				<img id="iconPass" width="18" height="auto" src="{{srcCloseEye}}">
			</div>
		</div>
	</div>	

	<div class="Grid login-bloco-envio" style="margin-top: 10px;">	
		<div id="btEnviarLoginParceiro" name="btEnviarLoginParceiro" class="formulario-bt-enviar bt-invalido" 
		onclick="enviaFormulario()" 
		onmouseover="alertaMsgForm(true)" 
		onmouseout="alertaMsgForm()">Enviar</div>

		<div id="bt-esqueci-senha" class="itens-link-login link-invalido"><a href="#" onclick="requestPass()" onmouseover="alertaMsgForm(true,'Esqueceu a senha? Insira o login e clique neste link!','valido')" onmouseout="alertaMsgForm()">Esqueci minha senha!</a></div>
		<div class="itens-link-login"><a href="#" onclick="Modal.show('faq-empresas.html');">FAQ Empresas</a></div>
		<div class="formulario-msg-feedback full-fixed invalido " style="margin-top: 5px; height: 35px;">Preencha corretamente todos os campos</div>
	</div>

	<input id="login-cnpj" type="hidden" name="login-cnpj" value="{{nrologin}}">
</form>

<!--{# <div class="banner-add desktop">
	<a href="https://guardemais.com.br" target="_blank">
		<img class="banner-add-desktop" src="{{ __BASEHTML__ }}img/banner-guardemais-desktop.jpg" alt="">
		<img class="banner-add-mobile" src="{{ __BASEHTML__ }}img/banner-guardemais-mobile.jpg" alt="">
	</a>
</div> #}-->



<script>
	var campologin = "#login-cnpj-{{nrologin}}";
	var isPassShow = false;
	
	var eyeIcon = {
		open:"{{ srcOpenEye }}",
		close:"{{ srcCloseEye }}"
	};

	function togglePass(){
		isPassShow = !isPassShow;
		if(isPassShow){
			document.getElementById('login-senha').type = 'text';
			document.getElementById('iconPass').src = eyeIcon.open;
		} else {
			document.getElementById('login-senha').type = 'password';
			document.getElementById('iconPass').src = eyeIcon.close;
		}
	}

	
</script>

{% endblock %}