{% extends "resources/base.html" %}

{% block content %}

    <div class="standardpage">
        <div class="row">

          <main class="produktcontainer">

            <!-- Left Column / Headphones Image -->
            <div class="left-column">
              <img data-image="1" src="/static/img/product_03.jpg" alt="">
              <img data-image="2" src="/static/img/product_04.jpg" alt="">
              <img data-image="3" class="active" src="/static/img/product_05.jpg" alt="">
            </div>

            <!-- Right Column -->
            <div class="right-column">
              <!-- Product Description -->
              <div class="product-description">
                <span>{{produkt.titel}}</span>
                <h1>{{produkt.titel}}</h1>
                <p>{{produkt.kurzbeschreibung}}</p>
              </div>
              <!-- Product Pricing -->
              <div class="product-price">
                <span>{{produkt.preis}}</span>
              <!--  <a onclick="addtocart(10,{{produkt.id}},1)" class="cart-btn">zum Warenkorb hinzufügen</a>-->

                <a data-produkt="{{produkt.id}}" class="cart-btn">zum Warenkorb hinzufügen</a>

              </div>
            </div>

        </main>
      </div>

  </div>

  <div id="modal1" class="modal">
    <div class="modal-content">
      <div class="modal-header">
        <h3>Produkt hinzugefügt</h3>
      </div>
      <div class="modal-body">

        <div class="box">

          <div class="row">

            <div class="col-lg-4 col-6 text-center">
                <a href="/produkte"> weiter shoppen<a>
            </div>
            <div class="col-lg-4 col-6 text-center">
                <a href="/warenkorb"> warenkorb<a>
            </div>
            <div class="col-lg-4 col-6 text-center">
                <a href="/checkout/checkout"> bestellen<a>
            </div>

          </div>
        </div>

      </div>
      <div id="mClose1" class="modal-footer">
        <h3>Schließen</h3>
      </div>
    </div>
  </div>



{% endblock %}