{% extends "oscar/customer/login_registration.html" %}

{% load i18n %}

{% block content %}
<section class="py-5 my-5">
	<div class="container">
	    <div class="row">
	        <div class="col-sm-6 login_form mx-auto">
	        	<div class="p-lg-4 p-3 bg-light login-wrapper">
		            <form id="login_form" action="{{ request.get_full_path }}" method="post" class="" >
		                <h2 class="h3">{% trans 'Log In' %}</h2>
		                {% csrf_token %}
		                {% include "oscar/partials/form_fields.html" with form=login_form %}
		                <p><a href="{% url 'password-reset' %}">{% trans "I've forgotten my password" %}</a></p>
	                	<div class="d-flex gap-3 align-items-center">
			                <button name="login_submit" type="submit" value="Log In" class="btn btn-primary" data-loading-text="{% trans "Logging in..." %}">{% trans 'Log In' %}</button>
			                <div>
			                	{% trans "or" %}
			            	</div>
			                <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#registermodal">
								{% trans "Register" %}
							</button>
						</div>
		            </form>
	        	</div>
	        </div>
	    </div>
	</div>
</section>

<div class="modal fade" id="registermodal" aria-labelledby="registermodal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
	    <div class="modal-body p-lg-4 p-3">
		    <form id="register_form" action="{{ request.get_full_path }}" method="post" class="">
		    	<div class="mb-3 d-flex align-items-center justify-content-between">
		        	<h2 class="h3 mb-0">{% trans 'Register' %}</h2>
		        	<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
		    	</div>
		        {% csrf_token %}
		        {% include "oscar/partials/form_fields.html" with form=registration_form %}
		        <button name="registration_submit" type="submit" value="Register" class="btn btn-primary mt-3" data-loading-text="{% trans 'Registering...' %}">{% trans 'Register' %}</button>
		    </form>
		</div>
    </div>
  </div>
</div>
{% endblock %}