{% extends 'base.html' %}

{% load static i18n %}

{% block title %}{% trans "Sign Up" %}{% endblock %}

{% block outter_content %}
	<!-- BEGIN signup -->
	<div class="login login-v1">
		<!-- BEGIN login-container -->
		<div class="login-container">
			<!-- BEGIN login-header -->
			<div class="login-header">
				<div class="brand">
					<div class="d-flex align-items-center">
						<img src="{% static 'img/logo/Agdar-Logo.png' %}" alt="" class="me-2" style="height: 128px; ">
					</div>
					<small>{% trans "Behavioral Clinic Management System" %}</small>
				</div>
				<div class="icon">
					<i class="fa fa-user-plus"></i>
				</div>
			</div>
			<!-- END login-header -->
			
			<!-- BEGIN login-body -->
			<div class="login-body">
				<!-- BEGIN login-content -->
				<div class="login-content fs-13px">
					{% if form.non_field_errors %}
					<div class="alert alert-danger alert-dismissible fade show" role="alert">
						{{ form.non_field_errors }}
						<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
					</div>
					{% endif %}
					<form action="{% url 'core:signup' %}" method="POST">
						{% csrf_token %}
						<div class="form-floating mb-20px">
							<input type="text" 
							       name="username" 
							       class="form-control fs-13px h-45px {% if form.username.errors %}is-invalid{% endif %}" 
							       id="username" 
							       placeholder="{% trans 'Username' %}"
							       value="{{ form.username.value|default:'' }}"
							       required
							       autofocus />
							<label for="username" class="d-flex align-items-center">{% trans "Username" %}</label>
							{% if form.username.errors %}
							<div class="invalid-feedback">
								{{ form.username.errors }}
							</div>
							{% endif %}
							<small class="form-text text-muted">{% trans "Required. 150 characters or fewer. Letters, digits and @/./+/-/_ only." %}</small>
						</div>

						<div class="form-floating mb-20px">
							<input type="email" 
							       name="email" 
							       class="form-control fs-13px h-45px {% if form.email.errors %}is-invalid{% endif %}" 
							       id="email" 
							       placeholder="{% trans 'Email' %}"
							       value="{{ form.email.value|default:'' }}"
							       required />
							<label for="email" class="d-flex align-items-center">{% trans "Email Address" %}</label>
							{% if form.email.errors %}
							<div class="invalid-feedback">
								{{ form.email.errors }}
							</div>
							{% endif %}
						</div>

						<div class="form-floating mb-20px">
							<input type="text" 
							       name="first_name" 
							       class="form-control fs-13px h-45px {% if form.first_name.errors %}is-invalid{% endif %}" 
							       id="first_name" 
							       placeholder="{% trans 'First Name' %}"
							       value="{{ form.first_name.value|default:'' }}" />
							<label for="first_name" class="d-flex align-items-center">{% trans "First Name" %}</label>
							{% if form.first_name.errors %}
							<div class="invalid-feedback">
								{{ form.first_name.errors }}
							</div>
							{% endif %}
						</div>

						<div class="form-floating mb-20px">
							<input type="text" 
							       name="last_name" 
							       class="form-control fs-13px h-45px {% if form.last_name.errors %}is-invalid{% endif %}" 
							       id="last_name" 
							       placeholder="{% trans 'Last Name' %}"
							       value="{{ form.last_name.value|default:'' }}" />
							<label for="last_name" class="d-flex align-items-center">{% trans "Last Name" %}</label>
							{% if form.last_name.errors %}
							<div class="invalid-feedback">
								{{ form.last_name.errors }}
							</div>
							{% endif %}
						</div>
						
						<div class="form-floating mb-20px">
							<input type="password" 
							       name="password1" 
							       class="form-control fs-13px h-45px {% if form.password1.errors %}is-invalid{% endif %}" 
							       id="password1" 
							       placeholder="{% trans 'Password' %}"
							       required />
							<label for="password1" class="d-flex align-items-center">{% trans "Password" %}</label>
							{% if form.password1.errors %}
							<div class="invalid-feedback">
								{{ form.password1.errors }}
							</div>
							{% endif %}
							<small class="form-text text-muted">
								<ul class="mb-0 ps-3">
									<li>{% trans "Your password can't be too similar to your other personal information." %}</li>
									<li>{% trans "Your password must contain at least 8 characters." %}</li>
									<li>{% trans "Your password can't be a commonly used password." %}</li>
									<li>{% trans "Your password can't be entirely numeric." %}</li>
								</ul>
							</small>
						</div>
						
						<div class="form-floating mb-20px">
							<input type="password" 
							       name="password2" 
							       class="form-control fs-13px h-45px {% if form.password2.errors %}is-invalid{% endif %}" 
							       id="password2" 
							       placeholder="{% trans 'Confirm Password' %}"
							       required />
							<label for="password2" class="d-flex align-items-center">{% trans "Confirm Password" %}</label>
							{% if form.password2.errors %}
							<div class="invalid-feedback">
								{{ form.password2.errors }}
							</div>
							{% endif %}
							<small class="form-text text-muted">{% trans "Enter the same password as before, for verification." %}</small>
						</div>
						
						<div class="login-buttons">
							<button type="submit" class="btn btn-theme h-45px d-block w-100 btn-lg">
								{% trans "Create Account" %}
							</button>
						</div>

						<div class="text-center mt-3">
							<small>
								{% trans "Already have an account?" %}
								<a href="{% url 'login' %}" class="text-theme">{% trans "Sign in here" %}</a>
							</small>
						</div>
					</form>
				</div>
				<!-- END login-content -->
			</div>
			<!-- END login-body -->
		</div>
		<!-- END login-container -->
	</div>
	<!-- END signup -->
{% endblock %}