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

{% 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>Twoje dane</h1>
                        <hr class="mt-1" />
                    </div>
                </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 mx-4">

                    <div class="col-12">
                        <label class="order-form-label">Dane Kontaktowe</label>
                    </div>
                    <hr class="mt-1" />
                    <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 class="col-12 text-end mt-3">
                        <div class="form-outline">
                            <input type="submit" value="Dalej" class="btn btn-success btn-lg">
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </form>
{% endblock %}
