{% extends "base/f_base.html" %} {% load static %} {% block header %} {% include "base/meta_tags.html" %} {% endblock header %} {% block content %}
<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' %}"  class="w-1/4"/>
	<h1 class="text-base text-text1 font-semibold my-3">به ربوکارت خوش اومدید!</h1>
	<p class="text-sm text-text1 font-normal">برای ورود، شماره تماس خود را وارد کنید.</p>

	<form class="w-full mt-12 px-4" 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 />
						{% if messages %} {% for message in messages %}
						<div class="text-red-500 rounded-full bg-red-50 p-3 text-base font-semibold my-3">{{ message }}</div>
						{% endfor %} {% endif %}
				</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-4 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 md: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 rounded-full">
			<button type="submit" name="type" value="otp" class="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 %}