{% extends 'base.html' %}
{% load i18n static %}
{% block title %}
    {% trans "inventory"|capfirst %}
{% endblock %}
{% block content %}
    <div class="row g-3 justify-content-between">
        <div class="col-sm-12">
            <div class="card border h-100 w-100 overflow-hidden">
                <div class="bg-holder d-block bg-card"
                     style="background-image:url({% static 'images/spot-illustrations/32.png' %});
                            background-position: top right"></div>
                <div class="d-dark-none me-5">
                    <div class="bg-holder d-none d-sm-block d-xl-none d-xxl-block bg-card"
                         style="background-image:url({% static 'images/spot-illustrations/dark_21.png' %});
                                background-position: bottom right;
                                background-size: auto"></div>
                </div>
                <div class="d-light-none me-5">
                    <div class="bg-holder d-none d-sm-block d-xl-none d-xxl-block bg-card"
                         style="background-image:url({% static 'images/spot-illustrations/21.png' %});
                                background-position: bottom right;
                                background-size: auto"></div>
                </div>
                <div class="card-body px-lg-5 position-relative">
                    <br>
                    <div class="row align-items-center g-3 g-sm-5 text-start text-sm-start">
                        <div class="col-12 col-sm-auto ">
                            <div class="avatar avatar-3xl avatar-bordered mb-3">
                                {% if cars.first.id_car_make.logo %}
                                    <img class="rounded" src="{{ cars.first.id_car_make.logo.url }}" alt="">
                                {% else %}
                                    <img class="rounded"
                                         src="{% static 'images/logos/car_make/sedan.svg' %}"
                                         alt="">
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-12 col-sm-auto flex-1">
                            <div>
                                <h3 class="mb-2">
                                    {{ cars.first.id_car_make.get_local_name }}&nbsp;<span class="ms-2 text-body-tertiary fw-semibold">{{ cars.first.id_car_model.get_local_name }}</span>
                                </h3>
                            </div>
                            <p class="text-body-tertiary fw-semibold">
                                {{ cars.first.id_car_serie.name }}, <span class="fs-10">{{ cars.first.id_car_trim.name }}</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row g-3 justify-content-between mt-4">
        <div class="col-sm-12">
            <div class="table-list" id="inventoryTable">
                <div class="table-responsive scrollbar mb-3">
                    <table class="table align-items-center table-flush">
                        <thead class="text-body">
                            <tr class="bg-body-highlight">
                                <th class="pe-1 align-middle white-space-nowrap text-center"
                                    data-sort="stock">{% trans 'Stock'|upper %}</th>
                                <th class="pe-1 align-middle white-space-nowrap text-start"
                                    data-sort="vin"
                                    style="min-width: 4.5rem">{% trans "VIN" %}</th>
                                <th class="pe-1 align-middle white-space-nowrap text-center"
                                    data-sort="date">{% trans "Year"|upper %}</th>
                                <th class="pe-1 align-middle white-space-nowrap text-center"
                                    data-sort="extColor"
                                    style="min-width: 8.5rem">{% trans 'Exterior Color'|upper %}</th>
                                <th class="pe-1 align-middle white-space-nowrap text-center"
                                    data-sort="intColor"
                                    style="min-width: 8.5rem">{% trans 'Interior Color'|upper %}</th>
                                <th class="pe-1 align-middle white-space-nowrap text-center"
                                    data-sort="location"
                                    style="min-width: 12.5rem">{% trans "Showroom Location"|upper %}</th>
                                <th class="pe-1 align-middle white-space-nowrap text-center"
                                    data-sort="status">{% trans 'Status'|upper %}</th>
                                <th class="pe-1 align-middle white-space-nowrap text-center"
                                    data-sort="age"
                                    style="min-width: 7rem">{% trans 'Age'|upper %}</th>
                                <th class="no-sort align-middle white-space-nowrap text-center"></th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for car in cars %}
                                <tr>
                                    <td class="align-middle white-space-nowrap text-center fw-bold text-body-tertiary">
                                        {% if car.stock_type == "new" %}
                                            <span class="badge badge-phoenix badge-phoenix-success"><span class="badge-label">{{ _("New") }}</span></span>
                                        {% elif car.stock_type == "used" %}
                                            <span class="badge badge-phoenix badge-phoenix-info"><span class="badge-label">{{ _("Used") }}</span></span>
                                        {% endif %}
                                    </td>
                                    <td class="align-middle white-space-nowrap text-start">
                                        <a class="fs-9 fw-bold"
                                           href="{% url 'car_detail' request.dealer.slug car.slug %}">{{ car.vin }}</a>
                                    </td>
                                    <td class="align-middle white-space-nowrap text-center fw-bold">{{ car.year }}</td>
                                    {% if car.colors %}
                                        <td class="align-middle white-space-nowrap text-body fs-9 text-start">
                                            <div class="d-flex flex-column align-items-center">
                                                <span class="color-div"
                                                      style="background: linear-gradient(90deg, rgba({{ car.colors.exterior.rgb }},1) 10%, rgba({{ car.colors.exterior.rgb }},0.10) 100%)"
                                                      title="{{ car.colors.exterior.get_local_name }}"></span><span>{{ car.colors.exterior.get_local_name }}</span>
                                            </div>
                                        </td>
                                        <td class="align-middle white-space-nowrap text-body fs-9 text-start">
                                            <div class="d-flex flex-column align-items-center">
                                                <span class="color-div"
                                                      style="background: linear-gradient(90deg, rgba({{ car.colors.interior.rgb }},1) 10%, rgba({{ car.colors.interior.rgb }},0.10) 100%)"
                                                      title="{{ car.colors.interior.get_local_name }}"></span><span>{{ car.colors.interior.get_local_name }}</span>
                                            </div>
                                        </td>
                                    {% else %}
                                        <td class="align-middle white-space-nowrap text-body fs-9 text-center">
                                            <span class="color-div">{% trans 'No Color' %}</span>
                                        </td>
                                        <td class="align-middle white-space-nowrap text-body fs-9 text-center">
                                            <span class="color-div">{% trans 'No Color' %}</span>
                                        </td>
                                    {% endif %}
                                    <td class="align-middle white-space-nowrap text-body fs-9 text-center">
                                        {% if car.location.is_owner_showroom %}
                                            {% trans 'Our Showroom' %}
                                        {% else %}
                                            {{ car.location.showroom.get_local_name }}
                                        {% endif %}
                                    </td>
                                    <td class="status align-middle white-space-nowrap text-center fw-bold text-body-tertiary">
                                        {% if car.status == "available" %}
                                            <span class="badge badge-phoenix fs-10 badge-phoenix-success"><span class="badge-label">{{ _("Available") }}</span><span class="ms-1" data-feather="check" style="height:13px;width:13px;"></span></span>
                                        {% elif car.status == "sold" %}
                                            <span class="badge badge-phoenix fs-10 badge-phoenix-primary"><span class="badge-label">{{ _("Sold") }}</span><span class="ms-1" data-feather="package" style="height:13px;width:13px;"></span></span>
                                        {% elif car.status == "hold" %}
                                            <span class="badge badge-phoenix fs-10 badge-phoenix-warning"><span class="badge-label">{{ _("Hold") }}</span><span class="ms-1"
      data-feather="alert-octagon"
      style="height:13px;
             width:13px"></span></span>
                                        {% elif car.status == "reserved" %}
                                            <span class="badge badge-phoenix fs-10 badge-phoenix-danger"><span class="badge-label">{{ _("Reserved") }}</span><span class="ms-1" data-feather="info" style="height:13px;width:13px;"></span></span>
                                        {% elif car.status == "damaged" %}
                                            <span class="badge badge-phoenix fs-10 badge-phoenix-secondary"><span class="badge-label">{{ _("Damaged") }}</span><span class="ms-1" data-feather="x" style="height:13px;width:13px;"></span></span>
                                        {% endif %}
                                    </td>
                                    <td class="date align-middle white-space-nowrap text-body-tertiary fs-9 ps-4 text-start">
                                        <span class="fw-light">{{ car.receiving_date|timesince }}</span>
                                    </td>
                                    <td class="align-middle white-space-nowrap text-end pe-0 ps-4">
                                        <a class="btn btn-sm btn-phoenix-success"
                                           href="{% url 'car_detail' request.dealer.slug car.slug %}">{% trans "view"|capfirst %}</a>
                                    </td>
                                </tr>
                            {% empty %}
                                <tr>
                                    <td colspan="7" class="d-flex flex-column align-items-center">
                                        <p class="text-muted">{% trans "No cars available." %}</p>
                                        <a href="{% url 'add_car' request.dealer.slug %}"
                                           class="btn btn-phoenix-primary">{% trans "Add a Car" %}</a>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="d-flex justify-content-end mt-3">
                <div class="d-flex">
                    {% if is_paginated %}
                        {% include 'partials/pagination.html' %}
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}