{% extends 'base.html' %}
{% load static %}
{% load i18n %}

{% block content %}
    <form action="" method="POST">
        {% csrf_token %}
        <section class="order-form m-4">
            <div class="container pt-4">
                <div class="row">
                    <div class="col-12 px-4">
                        <h1>{% trans "Your Data" %}</h1>
                        <hr class="mt-1" />
                    </div>
                    <hr class="mt-2" />
                </div>
                <div class="col-12">
                    <div class="row mx-4">
                        <div class="col-sm-6">
                            <label class="order-form-label">{{form.name.label}}</label>
                            <div class="form-outline">
                                {{form.name}}
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <label class="order-form-label">{{form.surname.label}}</label>
                            <div class="form-outline">
                                {{form.surname}}
                            </div>
                        </div>
                    </div>
                    <div class="row mx-4">
                        <div class="col-sm-6">
                            <label class="order-form-label">{{form.email.label}}</label>
                            <div class="form-outline">
                                {{form.email}}
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <label class="order-form-label">{{form.phone.label}}</label>
                            <div class="form-outline">
                                {{form.phone}}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col-12 px-4">
                        <h2>{% trans "Shipping Address"%}</h2>
                    </div>
                    <hr class="mt-2" />
                </div>
                <div class="row mt-3 mx-4">
                    <div class="col-sm-6 mt-2 pe-sm-2">
                        <div class="form-outline">
                            <label class="form-label" for="{{form.street.id}}">{{form.street.label}}</label>
                            {{form.street}}
                        </div>
                    </div>
                    <div class="col-sm-6 mt-2 pe-sm-2">
                        <div class="form-outline">
                            <label class="form-label" for="{{form.street.id}}">{{form.country.label}}</label>
                            {{form.country}}
                        </div>
                    </div>
                    <div class="col-sm-6 mt-2 pe-sm-2">
                        <div class="form-outline">
                            <label class="form-label" for="form7">{{form.city.label}}</label>
                            {{form.city}}
                        </div>
                    </div>
                    <div class="col-sm-6 mt-2 pe-sm-2">
                        <div class="form-outline">
                            <label class="form-label" for="form7">{{form.zip_code.label}}</label>
                            {{form.zip_code}}
                        </div>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col-12 px-4">
                        <h2>{% trans "Payment and Shipping" %}</h2>
                    </div>
                    <hr class="mt-2" />
                </div>

                <div class="row mt-3 mx-4">
                    <div class="col-sm-12 mt-2 pe-sm-2">
                        <div class="form-outline">
                            <label class="form-label" for="{{form.street.id}}">{{form.payment_method.label}}</label>
                            {{form.payment_method}}
                        </div>
                    </div>
                    <div class="col-sm-12 mt-2 pe-sm-2">
                        <div class="form-outline">
                            <label class="form-label" for="{{form.street.id}}">{{form.delivery_method.label}}</label>
                            {{form.delivery_method}}
                        </div>
                    </div>
                </div>

                <div class="row mt-3">
                    <div class="col-12 text-end mt-3">
                        <div class="form-outline">
                            <input type="submit" value="{% trans "Confirm" %}" class="btn btn-success btn-lg">
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </form>
{% endblock %}
