{{ block title }}
    Select a restaurant
{{ endblock }}

{{ block content }}


<!-- <h3>Select a restaurant</h3> -->
<div class="d-flex flex-wrap">
    <div class="card">
        <div class="card-body">
            <img src="{{ static 'restaurants/Yoshinoya.jpeg' }}" class="card-img-top" style="width: 255px">
            <h5 class="card-title">Yoshinoya</h5>
            <p class="card-text">
                Average Delivery Time: 15 min
            </p>
            <button type="button" class="btn btn-primary" value="1" onclick="selectRest(this)">Go to this restaurant</button>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <img src="{{ static 'restaurants/Restaurant2.jpeg' }}" class="card-img-top" style="width: 255px">
            <h5 class="card-title">Restaurant 2</h5>
            <p class="card-text">
                Average Delivery Time: 20 min
            </p>
            <button type="button" class="btn btn-primary" value="2" onclick="selectRest(this)">Go to this restaurant</button>
        </div>
    </div>
</div>
<input type="hidden" name="restaurant" id="restaurant">

<script>
    // function next() {
    //     return;
    // }

    // document.addEventListener("DOMContentLoaded", function (event) {
    //     liveSend({})
    // })
    function selectRest(btn) {
        console.log(btn.value)
        document.getElementById("restaurant").value = btn.value
        document.getElementById("form").submit()
        console.log(document.getElementById("restaurant"))
    }
</script>


{{ endblock }}