{% extends 'base.html' %}
{% block title %} Аккаунт | вход {% endblock %}

{% block styles %}
    <style>
    .form-section-wrapper {
        display: flex;
        flex-flow: row wrap;
        border: aqua dashed 1px;
    }

    .form-section-wrapper > h2 {
        color: var(--brand-color);
        width: 10em;
        padding: 0 1em;
    }

    .form-section-wrapper > div {
        border: red dashed 1px;
    }

    .form-field-wrapper > * {
        display: block;
    }

    .form-field-wrapper {
        border: green solid 1px;
        margin: 0.5em;
    }

    .form-inline-fields, #additional-params-wrapper {
        display: flex;
        flex-flow: row wrap;
        align-items: stretch;
        justify-content: space-between;
    }
    </style>
{% endblock %}

{% block content %}
    <h1 class=deprecated-page-header"> Создать заказ </h1>

    <h3>тут должна быть форма создания заказа, собсна вот она</h3>

    <form action="{% url 'order-create' %}" method="POST">
        {% csrf_token %}
{#        <table>#}
{#            <tbody> <!-- такой вариант не катит, форма не будет такой как на сайте, придется писать все ручками... -->#}
{#                {{ form.as_table }}#}
{#            </tbody>#}
{#        </table>#}
{#        {{ form.as_ul }}#}

        <!-- ну че ебана в рот, погнали нахуй -->

        <!-- тут должны быть файлы, технично их забываем -->
        <div class="form-section-wrapper">
            <h2>Внешний вид</h2>
            <div>
                <h4>Тут будут картинки</h4>
                <h4>Тут будет файл проекта</h4>
            </div>
        </div>

        <!-- -->
        <div class="form-section-wrapper">
            <h2>Параметры</h2>

            <div>
                <div class="form-field-wrapper {% if form.name.error %}form-field-error{% endif %}">
                    {{ form.name.errors }}
                    <label for="{{ form.name.id_for_label }}">{{ form.name.label }}</label>
                    {{ form.name }}
                </div>

                <div class="form-inline-fields">
                    <div class="form-field-wrapper {% if form.type_of_renovation.error %}form-field-error{% endif %}">
                        <label for="{{ form.type_of_renovation.id_for_label }}">{{ form.type_of_renovation.label }}</label>
                        {{ form.type_of_renovation }}
                    </div>
                    <div class="form-field-wrapper {% if form.type_of_house.error %}form-field-error{% endif %}">
                        <label for="{{ form.type_of_house.id_for_label }}">{{ form.type_of_house.label }}</label>
                        {{ form.type_of_house }}
                    </div>
                </div>

                <div class="form-inline-fields">
                    <div class="form-field-wrapper">
                        <label for="{{ form.type_of_room.id_for_label }}">{{ form.type_of_room.label }}</label>
                        {{ form.type_of_room }}
                    </div>

                    <div class="form-field-wrapper">
                        <label for="{{ form.is_require_design.id_for_label }}">{{ form.is_require_design.label }}</label>
                        {{ form.is_require_design }}
                    </div>

                    <div class="form-field-wrapper">
                        <label for="{{ form.purchase_of_material.id_for_label }}">{{ form.purchase_of_material.label }}</label>
                        {{ form.purchase_of_material }}
                    </div>

                    <div class="form-field-wrapper">
                        <label for="{{ form.type_of_executor.id_for_label }}">{{ form.type_of_executor.label }}</label>
                        {{ form.type_of_executor }}
                    </div>
                </div>

                <div class="form-field-wrapper">
                    <label>Дополнительные параметры</label>
                    <div id="additional-params-wrapper">
                        <div>
                            {{ form.is_with_warranty }}
                            <label for="{{ form.is_with_warranty.id_for_label }}">{{ form.is_with_warranty.label }}</label>
                        </div>
                        <div>
                            {{ form.is_with_contract }}
                            <label for="{{ form.is_with_contract.id_for_label }}">{{ form.is_with_contract.label }}</label>
                        </div>
                        <div>
                            {{ form.is_with_trade }}
                            <label for="{{ form.is_with_trade.id_for_label }}">{{ form.is_with_trade.label }}</label>
                        </div>
                        <div>
                            {{ form.is_with_cleaning }}
                            <label for="{{ form.is_with_cleaning.id_for_label }}">{{ form.is_with_cleaning.label }}</label>
                        </div>
                        <div>
                            {{ form.is_with_garbage_removal }}
                            <label for="{{ form.is_with_garbage_removal.id_for_label }}">{{ form.is_with_garbage_removal.label }}</label>
                        </div>
                    </div>
                </div>

                <div class="form-inline-fields">
                    <div class="form-field-wrapper {% if form.square.error %}form-field-error{% endif %}">
                        {{ form.square.errors }}
                        <label for="{{ form.square.id_for_label }}">{{ form.square.label }}</label>
                        {{ form.square }}
                    </div>
                    <div class="form-field-wrapper {% if form.square.error %}form-field-error{% endif %}">
                        {{ form.work_time.errors }}
                        <label for="{{ form.work_time.id_for_label }}">{{ form.work_time.label }}</label>
                        {{ form.work_time }}
                    </div>
                </div>

                <div class="form-field-wrapper {% if form.description.error %}form-field-error{% endif %}">
                    {{ form.description.errors }}
                    <label for="{{ form.description.id_for_label }}">{{ form.description.label }}</label>
                    {{ form.description }}
                </div>

                <div class="form-inline-fields">
                    <div class="form-field-wrapper {% if form.date_start.error %}form-field-error{% endif %}">
                        {{ form.date_start.errors }}
                        <label for="{{ form.date_start.id_for_label }}">{{ form.date_start.label }}</label>
                        {{ form.date_start }}
                    </div>
                    <div class="form-field-wrapper {% if form.date_end.error %}form-field-error{% endif %}">
                        {{ form.date_end.errors }}
                        <label for="{{ form.date_end.id_for_label }}">{{ form.date_end.label }}</label>
                        {{ form.date_end }}
                    </div>
                </div>

                <div class="form-field-wrapper {% if form.approximate_price.error %}form-field-error{% endif %}">
                    {{ form.approximate_price.errors }}
                    <label for="{{ form.approximate_price.id_for_label }}">{{ form.approximate_price.label }}</label>
                    {{ form.approximate_price }}
                </div>
            </div>
        </div>

        <div class="form-section-wrapper">
            <h2>Контакты</h2>
            <div>
                <div class="form-inline-fields">
                    <h4>Номер телефона</h4>
                <h4>Почта</h4>
                </div>

                <div class="form-inline-fields">
                    <div class="form-field-wrapper {% if form.address_city.error %}form-field-error{% endif %}">
                        {{ form.address_city.errors }}
                        <label for="{{ form.address_city.id_for_label }}">{{ form.address_city.label }}</label>
                        {{ form.address_city }}
                    </div>

                    <div class="form-field-wrapper {% if form.address_text.error %}form-field-error{% endif %}">
                        {{ form.address_text.errors }}
                        <label for="{{ form.address_text.id_for_label }}">{{ form.address_text.label }}</label>
                        {{ form.address_text }}
                    </div>
                </div>
            </div>
        </div>

        <button type="submit">Опубликовать</button>
    </form>
{% endblock %}