{% extends "landingPage.html" %} {% load static%} {%block body%}
<body>
  <!-- container  -->
  <div
    class="flex w-full h-full flex-col items-center bg-gray-50 px-3 pt-3 md:pb-5"
  >
    <div class="container-sm w-[97%] h-[100%] md:p-5">
      <!-- component -->
      {% for tick in tickets %}
      <div
        class="flex flex-row flex-wrap justify-between container-sm mt-[86px] md:flex-col"
      >
        <div class="pb-5 md:flex md:justify-center md:items-center">
          <a href="{% url 'render_pdf_view' tick.pk %}" target="_blank">
            <div
              class="w-96 h-56 bg-red-100 rounded-xl relative text-white shadow-2xl transition-transform transform hover:scale-110"
            >
              <img
                class="relative object-cover w-full h-full rounded-xl"
                src="{%static './public/images/kGkSg1v.png'%}"
              />

              <div class="w-full px-8 absolute top-8">
                <div class="flex justify-between">
                  <div class="">
                    <p class="font-medium tracking-widest">
                      {{ tick.dest_pk.from_destination }}
                    </p>
                    <p>to</p>
                    <p class="font-medium tracking-widest">
                      {{ tick.dest_pk.to_destination }}
                    </p>
                  </div>

                </div>

                <div class="pt-6">
                  <div class="flex justify-between">
                    <div class="">
                      <p class="font-light text-xs">Ticket No</p>
                      <p class="font-medium tracking-wider text-sm">
                        {{ tick.pk }}
                      </p>
                    </div>
                    <div class="">
                      <p class="font-light text-xs">Date</p>
                      <p class="font-medium tracking-wider text-sm">
                        {{ tick.dest_pk.date }}
                      </p>
                    </div>

                    <div class="">
                      <p class="font-light text-xs">Time</p>
                      <p class="font-medium tracking-wider text-sm">
                        {{ tick.dest_pk.time }}
                      </p>
                    </div>
                  </div>
                </div>
                <div class="pt-6 pr-6">
                  <div class="flex justify-between">
                    <div class="">
                      <p class="font-light text-xs">Location</p>
                      <p class="font-medium tracking-wider text-sm">
                        {{tick.dest_pk.bus_location}}
                      </p>
                    </div>
                    <div class="">
                      <p class="font-light text-xs">Bus No</p>
                      <p class="font-medium tracking-wider text-sm">
                        {{ tick.dest_pk.bus_No }}
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </a>
        </div>
      </div>
      {%endfor%}
    </div>
  </div>
</body>

{%endblock%}
