{% extends "layout.html" %}

{% set title = 'Compare' %}

{% block content %}

<div class="compare-list sec-pad bg-s-grey">
    <div class="container">
        <h4 class="mb-3 text-bold text-darkgray">صفحة المقارنة</h4>
        <div class="box-alt mb-4">
            <form action="">
                <div class="row">
                    <div class="col-sm-3">
                        <div class="form-group">
                            <label for="price" class="mb-2 text-semibold">السعر</label>
                            <div class="select-custom d-block mb-0">
                                <select name="" id="price" class="form-control">
                                    <option disabled selected>اختر من حيث السعر</option>
                                    <option value="1">من الأقل للأكثر</option>
                                    <option value="2">من الأكثر للأقل</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group">
                            <label for="dimention" class="mb-2 text-semibold">المساحة</label>
                            <div class="select-custom d-block mb-0">
                                <select name="" id="dimention" class="form-control">
                                    <option disabled selected>اختر من حيث المساحة</option>
                                    <option value="1">الأكبر</option>
                                    <option value="2">الأصغر</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group">
                            <label for="age" class="mb-2 text-semibold">عمر العقار</label>
                            <div class="select-custom d-block mb-0">
                                <select name="" id="age" class="form-control">
                                    <option disabled selected>اختر من حيث عمر العقار</option>
                                    <option value="1">الأحدث</option>
                                    <option value="2">الأقدم</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group">
                            <label for="income" class="mb-2 text-semibold">الدخل من العقار</label>
                            <div class="select-custom d-block mb-0">
                                <select name="" id="income" class="form-control">
                                    <option disabled selected>اختر من حيث الدخل من العقار</option>
                                    <option value="1">الأعلي</option>
                                    <option value="2">الأقل</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <input type="submit" value="قارن" class="btn mt-3 d-inline-block">
            </form>
        </div>
        <div class="row">
            {% for i in range(0, 3) -%}
                <div class="col-sm-6 col-md-4">
                    <div class="box-alt offer-item compare-item mb-4 mb-md-0">
                        <a href="#" class="remove-item bg-danger rounded-circle d-block"><i class="fa fa-times"></i></a>
                        <div class="offer-img-mask">
                            <div class="offer-img cover" style="background-image: url('./assets/images/gallery/01.jpg')"></div>
                        </div>
                        <div class="offer-details mt-2">
                            <div class="feature d-flex justify-content-between align-content-center pt-2 pb-2 bb">
                                <div class="feature-item text-semibold">السعر</div>
                                <div class="feature-item feature-price text-bold">٢٧٠٠ ريال</div>
                            </div>
                        </div>
                        <div class="feature d-flex justify-content-between align-content-center pt-2 pb-2 bb">
                            <div class="feature-item text-semibold">المساحه</div>
                            <div class="feature-item text-semibold">١٢٥ متر مربع</div>
                        </div>
                        <div class="feature d-flex justify-content-between align-content-center pt-2 pb-2 bb">
                            <div class="feature-item text-semibold">الموقع</div>
                            <div class="feature-item text-semibold"> جدة, حي الياسمين</div>
                        </div>
                        <div class="feature d-flex justify-content-between align-content-center pt-2 pb-2 bb">
                            <div class="feature-item text-semibold">عمر العقار</div>
                            <div class="feature-item text-semibold">١٠ سنوات</div>
                        </div>
                        <div class="feature d-flex justify-content-between align-content-center pt-2 pb-2 bb">
                            <div class="feature-item text-semibold">عدد الأدوار</div>
                            <div class="feature-item text-semibold">٣</div>
                        </div>
                        <div class="feature d-flex justify-content-between align-content-center pt-2 pb-2 bb">
                            <div class="feature-item text-semibold">عدد الشقق</div>
                            <div class="feature-item text-semibold">٦</div>
                        </div>
                        <div class="feature d-flex justify-content-between align-content-center pt-2 pb-2">
                            <div class="feature-item text-semibold">عدد الوحدات</div>
                            <div class="feature-item text-semibold">٥</div>
                        </div>
                        <a href="property.html" class="btn mt-3">مشاهدة تفاصيل الأعلان</a>
                    </div>
                </div>
        {%- endfor %}
        </div>
    </div>
</div>

{% endblock %}
{% block JS %}{% endblock %}