{% extends "base.jinja" %}
{% block content %}
    <div class="container">
        <div class="row">
            <div class="col"></div>
            <div class="col-8">
                <p>


                <form class="form-inline my-2 my-lg-0" action="{{ url('roomservice:search') }}" method="POST">
                    <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button"
                       aria-expanded="false" aria-controls="collapseExample">
                        Filter
                    </a>
                    <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
                    <input name="search" class="form-control mr-sm-2" type="search" placeholder="Search"
                           aria-label="Search">
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                </form>
                </p>

                <div class="collapse" id="collapseExample" style="max-width: 200px">
                    <form action="{{ url('roomservice:filter-search') }}" method="POST" id="form">
                        <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
                        <div class="card card-body">
                            <div class="form-check form-check-inline">
                                <input type="checkbox" class="form-check-input" name="barrierfree"
                                       id="checkboxbarrierfree">
                                <label class="form-check-label" for="checkbox">barrierfree</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input type="checkbox" class="form-check-input" id="checkbox" name="seating">
                                <label class="form-check-label" for="checkbox">seating</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input type="checkbox" class="form-check-input" id="checkbox" name="cooling">
                                <label class="form-check-label" for="checkbox">cooling</label>
                            </div>

                            <div class="form-group">
                                <label for="sel1">Select list:</label>
                                <select name="capacity" class="form-control" form="form" id="sel1">
                                    <option value="-1">no selection</option>
                                    <option value="20">20</option>
                                    <option value="30">30</option>
                                    <option value="60">60</option>
                                    <option value="120">120</option>
                                </select>
                            </div>

                            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Use filters</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-8">
                {#                <form action="{{ url("roomservice:booking") }}" method="POST" id="form">#}
                {#                    <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">#}
                {#                    <div class="form-group">#}
                {#
                {#                    </div>#}
                {#                    <button type="submit" method="POST" value=" Send" class="btn btn-success" id="submit"> Submit#}
                {#                    </button>#}
                {#                </form>#}
            </div>
        </div>
        {% if rooms %}
            <div class="row">
                <div class="col-12">
                    <h2>Results</h2>
                </div>
            </div>
            <div class="row">
                {% for room in rooms %}
                    <div class="col-6">
                        <div class="card" style="width: 18rem;">
                            <div class="card-body">
                                <h5 class="card-title">Room:{{ room.room_number }}</h5>
                                <h6 class="card-subtitle mb-2 text-muted">Building Name: {{ room.building.name }}</h6>
                                <div class="card-text">
                                    <p>Capacity: {{ room.capacity }} Persons</p>
                                    <p>Room type: {{ room.room_type.type }}</p></div>
                                <a href="{{ url('roomservice:booking', args=[room.id]) }}" class="card-link">Detail</a>
                                <a href="#" class="card-link">Another link</a>
                            </div>
                        </div>
                        <p></p></br>
                    </div>
                {% endfor %}
                <p>Results: {{ result_count }}</p>
            </div>
        {% endif %}
    </div>
{% endblock %}



