{% extends "admin/change_list.html" %}
{% block content %}
<div id="content-main">
    <form id="car-subcategory-form" method="post" action="" style="width: fit-content;">
        {% csrf_token %}
        <label for="id_car" style="display: inline-block; min-width: 50px">خودرو:</label>
        <select id="id_car" name="car" style="width: 250px">
            <option value="">---------</option>
            {% for car in cars %}
            <option value="{{ car.id }}" {% if record and record.car.id == car.id %}selected{% endif %}>{{ car.name }}</option>
            {% endfor %}
        </select>
        <br>
        <label for="id_subcategory" style="display: inline-block; min-width: 50px">زیردسته:</label>
        <select id="id_subcategory" name="subcategory" style="width: 250px">
            <option value="">---------</option>
            {% for subcategory in subcategories %}
            <option value="{{ subcategory.id }}" {% if record and record.subcategory.id == subcategory.id %}selected{% endif %}>{{ subcategory.name }}</option>
            {% endfor %}
        </select>
        <br>
        <input style="display: none;" type="submit" id="search">
        {% if record %}
        <div style="margin-top: 10px; width: 100%; display: flex; justify-content: center;">
            <a id="change-view-link" target="_blank" href="/adm-panel/core/carsubcategory/{{ record.id }}/change/" style="display: inline-block; text-decoration: none; background: #79aec8; color: white; padding: 6px 12px; border-radius: 5px;">ویرایش</a>
        </div>

        {% endif %}
    </form>
</div>
<script>
document.getElementById('id_car').addEventListener('change', function() {
    if(document.getElementById('id_subcategory').value != '' && document.getElementById('id_car').value != '')
        document.getElementById('search').click();

});
document.getElementById('id_subcategory').addEventListener('change', function() {
    if(document.getElementById('id_car').value != '' && document.getElementById('id_subcategory').value != '')
        document.getElementById('search').click();
});
</script>
{% endblock %}