catalogue.html

{%extends 'catalogue/layout.html'%}

{%block body%}
<!-- Page Content -->
<div class="imager container">

  <div class="row">

    <div class="col-lg-3">

      <h5 class="my-4 list-group-item">Table <span style="color:crimson">{{session['table_no']}}</span></h5>
      <h5 class="my-4 list-group-item">Customer <span style="color:green">{{session['cusid']}}</span></h5>
      <div class="list-group">
        
        <a href="/customer/category/starter" class="list-group-item">STARTERS</a>
        <a href="/customer/category/salad" class="list-group-item">SALAD</a>
        <a href="/customer/category/burger" class="list-group-item">BURGER</a>
      </div>

    </div>
<div class="col-lg-9">

    <div id="carouselExampleIndicators" class="carousel slide my-4" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
          <img style="border-radius:0.5em " class="d-block img-fluid" src="/static/images/items/banner1.jpeg" alt="First slide">
        </div>
        <div class="carousel-item">
          <img style="border-radius:0.5em " class="d-block img-fluid" src="/static/images/items/banner2.jpeg" alt="Second slide">
        </div>
        <div class="carousel-item">
          <img style="border-radius:0.5em " class="d-block img-fluid" src="/static/images/items/banner3.jpeg" alt="Third slide">
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
    {%include 'includes/_messages.html'%}
  <!--for loop-->
  <div class="row">
  
  {%for item in items%}
<!--item DIV<div id="{{item.item_ID|string}}">-->
  <div class="col-lg-4 col-md-6 mb-4">
        <div class="card h-100">
          <a href="#"><img class="card-img-top" src="{{item.image_url}}" alt="noimage"></a>
          <div class="card-body">
            <h4 class="card-title">
              <a href="javascript:showText({{item.item_ID}});">{{item.name}}</a>
            </h4>
            <h5>$ {{item.price}}</h5>
            <p class="card-text">{{item.description}}</p>
          </div>
          {% if msg %}
          <div class="alert alert-success">{{msg}}</div>
          {% endif %}
          <div id="{{item.item_ID}}" style="display:none;">
          <form method="post" action="/customer/category/additem">
              <input name="category" type="hidden" value="{{item.category}}"> 
              <input name="item_price" type="hidden" value="{{item.price}}">
              <input name="item_added" type="hidden" value="{{item.item_ID}}">
              <input placeholder="Enter Quantity" type="number" name="quan">
              <br/>              
              <br/>
              <input type="submit" class="btn btn-primary">

          </form>
        </div>
          <div class="card-footer">
            <small class="text-muted">&#9733; &#9733; &#9733; &#9733; &#9734;</small>
          </div>
        </div>
      </div>
<!--item DIV  </div> -->
    {%endfor%}

  </div>
  <!-- /.col-lg-9 -->
</div>
<script src="/static/js/customer.js"></script>
</div>
<!-- /.row -->

</div>
<!-- /.container -->

{%endblock%}