{% load i18n %}
{% load static %}

<div class="w_customer_route_card w_route_card" data-route_id="{{ route.id }}" data-owner_type="{{ route.owner_type }}">
    <div class="route_card_info_data">
        <img class="route_card_text_img" src="{% static "v2/icons/widgets/w_route_card/route_card_avatar_spline.svg" %}">
        <img class="route_card_owner_avatar" src="{{ route.owner.user_profile.avatar.url }}">
        <div class="route_card_owner_info">
            <div class="route_card_info_left_part">
                <div class="card_owner_name">{{ route.owner }}</div>
                <div class="card_splitter"></div>
                <div class="card_owner_type {{ route.owner_type }}">{% if route.owner_type == 'customer' %}{% trans "Нужен перевозчик" %}{% else %}{% trans "Могу перевезти" %}{% endif %}</div>
                <div class="card_cargo_type">{% trans "Тип посылки:" %} <div class="orange">{{ route.get_cargo_type_display }}</div></div>
            </div>
            <div class="route_btn phone inactive" style="--route-btn-width: max-content;--route-btn-height: min-content;--route-btn-padding: 7.5px 11px;">
                <img src="{% static "v2/icons/widgets/w_route_card/phone_half_opacity.svg" %}" alt="">
                <div class="route_btn_title big">{{ route.phone }}</div>
            </div>
        </div>
        <div class="route_card_text_container">
            {% if route.comment %}
            	{{ route.comment|linebreaksbr }}
            {% else %}
                {% trans "Комментарий отсутствует" %}
            {% endif %}
        </div>
    </div>
    <div class="route_card_route_data">
        <div class="from_to_place_data">
            <div class="label departure_from">{% trans "Забрать из:" %}</div>
            <div class="place">
                <div class="country">
                    <img src="{{ route.from_city.country.flag.url }}" alt="">
                    <div class="country_code">{{ route.from_city.country.code }}</div>
                </div>
                <div class="place_title">
                    {{ route.from_city.name }}/{{ route.from_city.country.name }}
                </div>
            </div>
        </div>
        <div class="route_way_data">
            <div class="route_transport">
                <div class="route_transport_name">{{ route.get_type_transport_display }}</div>
                {% if route.type_transport == '' %}
                    <img src="{% static "v2/icons/widgets/w_route_card/plane.svg" %}" alt="">
                    <img src="{% static "v2/icons/widgets/w_route_card/car.svg" %}" alt="">
                {% elif route.type_transport == 'road' %}
                    <img src="{% static "v2/icons/widgets/w_route_card/car.svg" %}" alt="">
                {% elif route.type_transport == 'avia' %}
                    <img src="{% static "v2/icons/widgets/w_route_card/plane.svg" %}" alt="">
                {% endif %}
            </div>
            <div class="way_progress_line_container">
                <div class="way_progress_round"></div>
                <div class="way_progress_line"></div>
                <div class="way_progress_arrows_line"></div>
                <div class="way_progress_round"></div>
            </div>
            {% if route.owner_type == 'customer' %}
                <div class="route_date_data">
                    {% trans "Дата доставки:" %}
                    <div class="date_data_value">{{ route.arrival_DT|date:'d F Y' }}</div>
                </div>
            {% endif %}
        </div>
        <div class="from_to_place_data">
            <div class="label arrival_to">{% trans "Доставить в:" %}</div>
            <div class="place">
                <div class="country">
                    <img src="{{ route.to_city.country.flag.url }}" alt="">
                    <div class="country_code">{{ route.to_city.country.code }}</div>
                </div>
                <div class="place_title">
                    {{ route.to_city.name }}/{{ route.to_city.country.name }}
                </div>
            </div>
        </div>
    </div>
    <div class="route_card_route_data mobile">
        <div class="way_progress_line_container mobile">
            <div class="way_progress_round"></div>
            <div class="way_progress_line"></div>
            <div class="way_progress_arrows_line"></div>
            <div class="way_progress_round"></div>
        </div>
        <div class="right_part_route_card">
            <div class="from_to_place_data">
                <div class="label departure_from">{% trans "Забрать из:" %}</div>
                <div class="place">
                    <div class="country">
                        <img src="{{ route.from_city.country.flag.url }}" alt="">
                        <div class="country_code">{{ route.from_city.country.code }}</div>
                    </div>
                    <div class="place_title">
                        {{ route.from_city.name }}/{{ route.from_city.country.name }}
                    </div>
                </div>
            </div>
            <div class="route_way_data">
                <div class="route_transport">
                    <div class="route_transport_name">{{ route.get_type_transport_display }}</div>
                    {% if route.type_transport == '' %}
                        <img src="{% static "v2/icons/widgets/w_route_card/plane.svg" %}" alt="">
                        <img src="{% static "v2/icons/widgets/w_route_card/car.svg" %}" alt="">
                    {% elif route.type_transport == 'road' %}
                        <img src="{% static "v2/icons/widgets/w_route_card/car.svg" %}" alt="">
                    {% elif route.type_transport == 'avia' %}
                        <img src="{% static "v2/icons/widgets/w_route_card/plane.svg" %}" alt="">
                    {% endif %}
                </div>
                <div class="route_date_splitter"></div>
                {% if route.owner_type == 'customer' %}
                    <div class="route_date_data">
                        {% trans "Дата доставки:" %}
                        <div class="date_data_value">{{ route.arrival_DT|date:'d F Y' }}</div>
                    </div>
                {% endif %}
            </div>
            <div class="from_to_place_data">
                <div class="label arrival_to">{% trans "Доставить в:" %}</div>
                <div class="place">
                    <div class="country">
                        <img src="{{ route.to_city.country.flag.url }}" alt="">
                        <div class="country_code">{{ route.to_city.country.code }}</div>
                    </div>
                    <div class="place_title">
                        {{ route.to_city.name }}/{{ route.to_city.country.name }}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="route_card_actions_container">
        <div class="delete_route" onclick="deleteRoute(this)">{% trans "Удалить" %}</div>
        <div class="right_part_action_btns">
            <div class="route_btn" data-action="raise" onclick="raiseRoute(this)">
                <div class="route_btn_title">{% trans "Поднять" %}</div>
                <div class="route_btn_data">Осталось поднятий: 2</div>
            </div>
            <div class="route_btn" data-action="highlight" onclick="highlightRoute(this)">
                <div class="route_btn_title">{% trans "Выделить цветом" %}</div>
                <div class="route_btn_data">Осталось выделений: 0</div>
            </div>
            <div class="route_btn solid" data-action="change" onclick="changeRoute(this)">
                <div class="route_btn_title">{% trans "Редактировать" %}</div>
            </div>
        </div>
    </div>
    <div class="route_btn phone mobile inactive" style="--route-btn-width: 100%;--route-btn-height: min-content;--route-btn-padding: 7.5px 11px;">
        <img src="{% static "v2/icons/widgets/w_route_card/phone_half_opacity.svg" %}" alt="">
        <div class="route_btn_title big">{{ route.phone }}</div>
    </div>
    <div class="route_card_actions_container mobile">
        <div class="route_btn solid" style="--route-btn-width: auto;" data-action="change" onclick="changeRoute(this)">
            <div class="route_btn_title">{% trans "Редактировать" %}</div>
        </div>
        <div class="container_actions_mobile">
            <div class="route_btn" data-actions_count="{{ used_route_rising_count }}" style="--route-btn-height: fit-content;--route-btn-width: auto;" data-action="raise" onclick="raiseRoute(this)">
                <div class="route_btn_title">{% trans "Поднять" %}</div>
                <div class="route_btn_data">Осталось поднятий: {{ used_route_rising_count }}</div>
            </div>
            <div class="route_btn" data-actions_count="{{ used_route_highlight_count }}" style="--route-btn-height: fit-content;--route-btn-width: auto;" data-action="highlight" onclick="highlightRoute(this)">
                <div class="route_btn_title">{% trans "Выделить цветом" %}</div>
                <div class="route_btn_data">Осталось выделений: {{ used_route_highlight_count }}</div>
            </div>
        </div>
        <div class="delete_route" onclick="deleteRoute(this)">{% trans "Удалить" %}</div>
    </div>
</div>