177 lines
13 KiB
HTML
177 lines
13 KiB
HTML
{% 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 }} <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 %}
|