{% extends "base/f_base.html" %}
{% load static %}
{% block header %}
    {% include "base/meta_tags.html" %}
{% endblock header %}
{% block content %}
	<div class="custom-cursor fixed w-5 h-5 rounded-full border-2 z-50 pointer-events-none transform -translate-x-1/2 -translate-y-1/2 transition-transform duration-100 ease-out shadow-[0_0_10px_rgba(255,255,255,0.5)] animate-pulse"></div>
	<div class="w-full flex flex-col justify-start items-center relative">
		<img class="-mb-16" src="{% static 'images/bg-login.png' %}">
		<img src="{% static 'images/logo.png' %}">
		<h1 class="text-base text-text1 font-semibold my-3">به ربوکارت خوش اومدید!</h1>
		<p class="text-sm text-text1 font-normal">برای ورود، شماره تماس خود را وارد کنید.</p>
		{% if messages %}
			{% for message in messages %}
				<div class="alert {% if message.tags == 'success' %}alert-success{% else %}alert-danger{% endif %}">
					{{ message }}
				</div>
			{% endfor %}
		{% endif %}
		<form class="w-full mt-12" method="post" enctype="multipart/form-data">
			{% csrf_token %}				
			<div class="mb-3 w-full">
				<div class="flex items-center">
					<div class="w-full">
						<label for="password" class="transition-all duration-200 peer-placeholder-shown:text-pr-m peer-placeholder-shown:text-base peer-focus:text-sm peer-focus:text-pr-m text-text1 text-sm bg-white px-1">
							رمز عبور<span class="text-red-500">*</span>
						</label>
						<input type="password" id="password" placeholder="مثال: 09123456789" autocomplete="password" name="password" class="peer h-12 w-full px-3 mt-2 bg-transparent focus:border-pr-m transition-all duration-200 border-2 rounded-full" autocomplete="on" required/>
					</div>
				</div>
			</div>			
			
			<div class="flex flex-row items-end justify-end gap-2">
				<input type="hidden" name="type" value="login">
				<button type="submit" name="type" value="login" class="bg-pr-m  flex-grow-1 h-14 flex flex-row gap-2 rounded-full items-center justify-center w-1/2 absolute left-0 bottom-0">
					<span class="font-bold text-base text-black ">ورود به سایت</span>
					<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
						<path d="M0.566406 6.24219C0.429688 6.10547 0.375 5.94141 0.375 5.75C0.375 5.58594 0.429688 5.42188 0.566406 5.28516L5.37891 0.691406C5.65234 0.445312 6.0625 0.445312 6.30859 0.71875C6.55469 0.964844 6.55469 1.40234 6.28125 1.64844L2.64453 5.09375H11.9688C12.3242 5.09375 12.625 5.39453 12.625 5.75C12.625 6.13281 12.3242 6.40625 11.9688 6.40625H2.64453L6.28125 9.87891C6.55469 10.125 6.55469 10.5352 6.30859 10.8086C6.0625 11.082 5.65234 11.082 5.37891 10.8359L0.566406 6.24219Z" fill="#263238"/>
					</svg>
				</button>
			</div>
		</form>
		<form class="mt-4 flex flex-col items-start justify-start gap-2 w-full" method="post" enctype="multipart/form-data">
			{% csrf_token %}				
			<div class="peer h-12 w-full px-3 mt-2 bg-transparent focus:border-pr-m transition-all duration-200 border-2 rounded-full">
				<button type="submit" name="type" value="otp" class="bg-white rounded-lg flex-grow-1 h-14 flex flex-col items-center justify-center font-bold text-base text-blue1 w-1/2 absolute right-0 bottom-0">
					ورود با کد یک بار مصرف
				</button>
			</div>
		</form>
	</div>
{% endblock content %}