{% extends "base.html" %}

{% block content %}
    <div class="row is-vertical-align">
        <div class="col"></div>
        <form class="col-6 card is-vertical-align" method="post">
            <h3 class="is-center mb-5">{% if current_car %} Просмотр автомобиля {% else %} Регистрация автомобиля {% endif %}</h3>
            {% if errors %}
            <div class="alert alert-danger mb-3 h4" role="alert">
                {{ errors }}
            </div>
            {% endif %}
            <div class="row mb-3">
                <label class="h4">Марка: <input type="text" name="brand" {% if current_car %} value="{{ current_car.brand }}" {% endif %}/></label>
            </div>
            <div class="row mb-3">
                <label class="h4">Модель: <input type="text" name="model" {% if current_car %} value="{{ current_car.model }}" {% endif %}/></label>
            </div>
            <div class="row mb-3">
                <label class="h4">Цена: <input type="text" name="price" pattern="\d+\.\d{2}" {% if current_car %} value="{{ current_car.price }}" {% endif %}/></label>
            </div>
            <div class="row mb-3">
                <label class="h4">
                    Владелец:
                    <select id="owner_id" name="owner_id" class="mt-2">
                        {% for owner in owners %}
                            <option {% if selected_owner and selected_owner == owner['id'] %} selected {% endif %} value="{{ owner['id'] }}">ФИО: {{ owner['surname'] }} {{ owner['name'][0] }}. {{ owner['middlename'][0] }}. Телефон: {{ owner['phone'] }}</option>
                        {% endfor %}
                    </select>
                </label>
            </div>
            <div class="row mb-5">
                <button class="button primary is-center">{% if current_car %} Изменить {% else %} Зарегистрировать автомобиль {% endif %}</button>
            </div>
        </form>
        <div class="col"></div>
    </div>
    <div class="row is-vertical-align mt-5">
        <div class="card col table table-striped">
            <h2 class="is-center mb-4">Все автомобили на стоянке</h2>
            <table>
                <tr>
                    <th class="h4">Марка</th>
                    <th class="h4">Модель</th>
                    <th class="h4">Цена</th>
                    <th class="h4">Владелец</th>
                    <th class="h4">Действия</th>
                </tr>
                {% for car in cars|sort(attribute="brand")|sort(attribute="model")|sort(attribute="price") %}
                    <tr>
                        <td class="h4">{{ car.brand }}</td>
                        <td class="h4">{{ car.model }}</td>
                        <td class="h4">{{ car.price }}</td>
                        <td class="h4"><a href="{{ url_for('owners', id=car.owner_id) }}">Перейти к владельцу</a></td>
                        <td>
                            <div class="row">
                                <a href="{{ url_for("rents", car=car.id) }}" class="button primary outline col">Арендовать</a>
                                <a href="{{ url_for("cars", id=car.id) }}" class="button primary outline col">Посмотреть</a>
                            </div>
                        </td>
                    </tr>
                {% endfor %}
            </table>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script>
        $(document).ready(function() {
            $('#owner_id').select2();
        });
    </script>
{% endblock %}