<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>{{ query }}</title>

  <!-- Bootstrap core CSS -->
  <link href="../../static/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

  <!-- Custom fonts for this template -->
  <link href="../../static/assets/vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
  <link href="../../static/assets/vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet"
    type="text/css">

  <!-- Custom styles for this template -->
  <link href="../../static/assets/css/landing-page.min.css" rel="stylesheet">

</head>

<body>

  <!-- Navigation -->
  <nav class="navbar navbar-dark bg-dark static-top">
    <div class="container">
      <a class="navbar-brand" href="/home">Cookpedia</a>
      <!-- <a class="btn btn-primary" href="#">Pilih Buku</a>
         -->
    </div>
  </nav>
  <!-- Testimonials -->
  <section class="testimonials text-center bg-light">
    <div class="container">
      <h2 class="mb-5">Resep yang sesuai dengan "{{ query }}"</h2>
      {% if hasil %}
      <div class="row">
        {% for i in hasil %}
        {% for j in i %}

        <div class="col-lg-4">
          <div class="testimonial-item mx-auto mb-5 mb-lg-0">
            <img class="img-fluid rounded-circle mb-3" src="../../static/img/resep.jpg" alt="">
            <h5><a href="/resep/{{j.DOCNO}}">Resep No:{{ j.DOCNO }}</a></h5>
            <h5>"{{ j.Title }}"</h5>
            <p class="font-weight-light mb-0">score :{{ j.score }}</p>
          </div>
        </div>
        {% endfor %}
        {% endfor %}
      </div>

      {% else %}
      <h2 class="mb-5">Resep dengan kata kunci: "{{ query }}" tidak ditemukan</h2>
      {% endif %}
    </div>

  </section>


  <!-- Bootstrap core JavaScript -->
  <script src="../../static/assets/vendor/jquery/jquery.min.js"></script>
  <script src="../../static/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

</body>

</html>