{% extends 'base.html.twig' %}

{% block scripts %}
    <script src="{{ asset('models.js') }}" ></script>
{% endblock %}

{% block body %}

<!-- begin:: Page -->

<!-- begin:: Header Mobile -->
{% include 'common/header_mobile.html.twig' %}

<!-- end:: Header Mobile -->
<div class="kt-grid kt-grid--hor kt-grid--root">
    <div class="kt-grid__item kt-grid__item--fluid kt-grid kt-grid--ver kt-page">
        <div class="kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor kt-wrapper" id="kt_wrapper">

            <!-- begin:: Header -->
            {{ render(controller('App\\Controller\\Common\\Top::index')) }}

            <!-- end:: Header -->
            <div class="kt-body kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor kt-grid--stretch" id="kt_body">
                <div class="kt-content kt-content--fit-top  kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor" id="kt_content">
                    <header class="page-header-top">
                        <div class="container-fluid home-header">
                            <div class="row">
                                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                                    <div class="page-caption">
                                        <!--h1 class="page-title">Listing</h1-->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </header>
    <main>
        <div class="container ">
            <div class="row">
                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                    <div class="card-block-detail card-block-detail-part-model">
                        <div class="col-12">
                            <h1>SSANGYONG ACTYON SPORTS I REAR SEAT LIGHT</h1>
                        </div>
                        <div class="col-12">
                            <h2>
                                <i class="fa fa-home"></i>
                                <span style="color: #BCBCBC">&nbsp; &bull; &nbsp;
                                    {{ make }} {{ model }}
                                </span>
                            </h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-section" >
            <div class="container">
                <div class="card-block bg-white mb30 part-model">
                    <div class="row" >
                        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 header-pad">
                            <img src="{{ asset('models/bmw-logo.png') }}" alt="">
                            <span>{{ make }} {{ model }}</span>
                        </div>
                        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                            <div class="search-box">
                            <div class="form-group">
                                <div class="icon-addon addon-lg">
                                    <input type="search" placeholder="Αναζήτηση" class="form-control search-box-img">
                                </div>
                            </div>
                        </div>
                        </div>
                        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                            <div class="part-accordion">
                                <div class="part-accordion-tabs">
                                    {% for category in part_categories %}
                                    <div class="part-accordion-tab">
                                        <input type="radio" id="rd_{{ category.categories_parts_id }}" name="rd" checked>
                                        <label class="part-accordion-tab-label" for="rd_{{ category.categories_parts_id }}">
                                             <div>
                                                 <img src="{{ assets }}media/icons/svg/part-categories/{{ category
                                                 .image }}" alt="{{ category.title }}" class="image_category"/>
                                               <span>{{ category.title }}</span>
                                             </div>
                                        </label>
                                        <div class="part-accordion-tab-content">
                                            <div class="row" >
                                                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 show-all-category">
                                                    <a href="/">Show all parts in category - {{ category.title }}</a>
                                                </div>
                                            </div>
                                            <div class="row" >
                                                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                                                    <ul>
                                                        {% for part in category.parts %}
                                                        <li>
                                                            {% if part.total_parts > 0 %}

                                                                {# {{ part_url }}/{{make }}/{{ model }}/{{ part.title }}/{{ year }} #}
                                                                <a style="font-weight: 600;" href="{{ part.url }}">{{
                                                                    part.title
                                                                    }} ({{part.total_parts }})</a>
                                                            {% else %}
                                                                {{ part.title }} ({{ part.total_parts }})
                                                            {% endif %}
                                                        </li>
                                                        {% endfor %}
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </main>
    {{ render(controller('App\\Controller\\Common\\Footer::index')) }}
    </div>
    </div>
    </div>
{% endblock %}