{% extends 'userapp/master.html' %}
{% load static %}
{% block content %}

<!-- Page Header Start -->
<div class="container-fluid page-header">
    <h1 class="display-3 text-uppercase text-white mb-10">Bicycle Detail</h1>

</div>
<!-- Page Header Start -->


<!-- Detail Start -->
<div class="container">
    <div class="row d-flex justify-content-start">
        {% for ab in bike %}
        <div class=" col-lg-6 p-0 px-2 m-0 mb-2">
            <div class="card border-0 shadow-sm rounded-5">
                <div class="card-body">
                    <div class="row d-flex align-items-start justify-content-start">
                        <div class="col-lg-6 mb-4">
                            {% if ab.image %}
                            <img class="img-fluid rounded-3" src="{{ ab.image.url }}" alt="Bicycle">
                            {% else %}
                            <img class="img-fluid rounded-3" src="{% static 'userapp/assets/img/b9.jpg' %}" alt="Bicycle">
                            {% endif %}
                        </div>
                        <div class="col-lg-6 mb-4">
                            <h4 class="mb-2 text-primary">Bicycle Details</h4>
                            
                            <div class="d-flex align-items-start">
                                <i class="fa fa-bicycle text-warning mx-2"></i>
                                <p class="mb-2 text-dark">Code: <span class="fw-bold">{{ ab.code }}</span></p>
                            </div>
                            
                            <div class="d-flex align-items-start">
                                <i class="fa fa-bicycle text-warning mx-2"></i>
                                <p class="mb-2 text-dark">Model: <span class="fw-bold">{{ ab.model }}</span></p>
                            </div>

                            <div class="d-flex align-items-start">
                                <i class="fa fa-bicycle text-warning mx-2"></i>
                                <p class="mb-2 text-dark">Category: <span class="fw-bold">{{ ab.category.name }}</span></p>
                            </div>

                            <div class="d-flex align-items-start">
                                <i class="fa fa-map-marker text-danger mx-2"></i>
                                <p class="mb-2 text-dark">Station:<span class="fw-bold">{{ ab.station.name }}</span>
                                     <span class="fw-bold">{{ ab.station.location }}</span></p>
                            </div>

                            <div class="d-flex align-items-start">
                                <i class="fa fa-tag text-success mx-2"></i>
                                <p class="mb-2 text-dark">Price: <span class="fw-bold">₹{{ ab.price }}</span></p>
                            </div>

                            <div class="d-flex align-items-start">
                                <i class="fa fa-user text-info mx-2"></i>
                                <p class="mb-2 text-dark">User: <span class="fw-bold">{{ ab.user }}</span></p>
                            </div>

                            <div class="d-flex align-items-start pt-3">
                                <a href="{% url 'userbooking' ab.id %}">
                                    <button class="btn btn-warning px-3 fw-bold" type="submit">Rent Bicycle</button>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>



<!-- Detail End -->

{% endblock %}