<div class="d-flex flex-column wrapper">
  <nav
    class="
      navbar navbar-expand-lg navbar-dark
      bg-light
      border-bottom
      shadow-sm-mb-3
    "
  >
    <div class="container">
      <a class="navbar-brand text-dark" href="#">Navbar</a>
      <button
        class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbarNavDropdown"
        aria-controls="navbarNavDropdown"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav flex-grow-1">
          <li class="nav-item">
            <a class="nav-link active text-dark" aria-current="page" href="#"
              >Home</a
            >
          </li>
          <li class="nav-item">
            <a class="nav-link text-dark" href="#">Cliente</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-dark" href="#">Vendedor</a>
          </li>
        </ul>
        <div class="align-self-end">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link text-white">
                <i class="bi-cart" routerLink="/carrinho" style="font-size: 24px"></i>
              </a>
            </li>
          </ul>
          <button class="k-button" (click)="openClose(!opened)">tela</button>
        </div>
      </div>
    </div>
  </nav>


  <!--div class="d-flex flex-row-reverse" style="background-color: red;">
    <kendo-window
    [(top)]="windowTop"
    [(left)]="windowLeft"
    title="Status"
    *ngIf="opened"
    (close)="openClose(false)"
  >
    <p style="text-align: center">Successful!</p>
  </kendo-window>

  </div-->

  <nav
    class="
      navbar navbar-expand-lg navbar-dark
      bg-primary
      border-bottom
      shadow-sm-mb-3
    "
  >
    <div class="container">
      <button
        class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbarNavDropdown"
        aria-controls="navbarNavDropdown"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav flex-grow-1"></ul>
        <div class="align-self-end">
          <ul class="navbar-nav"></ul>
        </div>
      </div>
    </div>
  </nav>

  <div *ngIf="opened" class="cart-wrapper">

  </div>

  <main class="flex-fill">
    <div class="container">
      <div class="row g-3 pb-3">
        <div
          class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-3 col-xxl-2"
          *ngFor="let product of promotions$ | async"
        >
          <div class="card mt-2 text-center">
            <!-- height: 150px; width: 180px; -->
            <img
              *ngIf="product.urlImage"
              class="card-img-top"
              style="margin: 10px; height: 150px; width: 180px"
              src="{{ getImage(product.urlImage) }}"
            />
            <img
              *ngIf="!product.urlImage"
              class="card-img-top"
              style="margin: 10px; height: 150px; width: 180px"
              src="assets/amico.png"
            />
            <span
              *ngIf="product.price && product.offPercent != 0"
              class="badge rounded-pill text-white mt-2 position-absolute end-0"
              style="opacity: 0.8; background-color: #fd7e14"
              title="{{
                product.offPercent
              }}% de desconto sobre preço a prazo"
              ><small>{{ product.offPercent }}% desconto</small></span
            >
            <div class="card-body">
              <div style="min-height: 60px">
                <p class="card-text truncar-3l">
                  <a href="/sales/product-detail/{{ product.idProduct }}">{{
                    product.title
                  }}</a>
                </p>
              </div>
              <div class="row">
                <div class="col-6">
                  <small class="card-text" style="font-size: 0.6rem"
                    ><strong
                      >{{ 0 }} em estoque</strong
                    ></small
                  >
                </div>
                <div class="col-6" *ngIf="product.productType == 'A'">
                  <span
                    class="badge rounded-pill text-white"
                    style="opacity: 0.8; background-color: #3f14fd"
                  >
                    <small>Autosserviço</small></span
                  >
                </div>
                <div class="col-6" *ngIf="product.productType == 'S'">
                  <span
                    class="badge rounded-pill text-white"
                    style="opacity: 0.8; background-color: hsl(345, 98%, 54%)"
                  >
                    <small>Showroom</small></span
                  >
                </div>
              </div>
            </div>

            <div *ngIf="product.offPercent == 0" class="card-footer">
              <div
                class="d-flex justify-content-center align-items-center"
                style="min-height: 60px"
              >
                <h5>
                  <p>R$ {{ product.salePrice | number: "1.2-2" }}</p>
                </h5>
              </div>
              <button
                type="button"
                class="btn btn-primary"
                (click)="addItem(product)"
              >
                Adicionar ao carrinho
              </button>
            </div>

            <div
              *ngIf="product.offPercent > 0"
              class="card-footer bg-warning"
            >
              <h5 class="d-block text-white">
                R$ {{ product.salePrice }}
              </h5>
              <small class="d-block text-dark">
                <s>R$ {{ product.listPrice }} </s>
              </small>
              <button
                type="button"
                class="btn btn-primary mt-2"
                (click)="addItem(product)"
              >
                Adicionar ao carrinho
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>

  <footer class="border-top text-muted bg-light">
    <div class="container">
      <div class="row py-3">
        <div class="col-12 col-md-4 text-center">
          &copy; 2020 - Quitanda Online Ltda ME<br />
          Rua Virtual Inexistente, 171, Compulândia/PC <br />
          CPNJ 99.999.999/0001-99
        </div>
        <div class="col-12 col-md-4 text-center">
          <a href="/privacidade.html" class="text-decoration-none text-dark">
            Política de Privacidade </a
          ><br />
          <a href="/termos.html" class="text-decoration-none text-dark">
            Termos de Uso </a
          ><br />
          <a href="/quemsomos.html" class="text-decoration-none text-dark">
            Quem Somos </a
          ><br />
          <a href="/trocas.html" class="text-decoration-none text-dark">
            Trocas e Devoluções
          </a>
        </div>
        <div class="col-12 col-md-4 text-center">
          <a href="/contato.html" class="text-decoration-none text-dark">
            Contato pelo Site </a
          ><br />
          E-mail:
          <a
            href="mailto:email@dominio.com"
            class="text-decoration-none text-dark"
          >
            email@dominio.com </a
          ><br />
          Telefone:
          <a href="phone:28999990000" class="text-decoration-none text-dark">
            (28) 99999-0000
          </a>
        </div>
      </div>
    </div>
  </footer>

  <div kendoDialogContainer></div>
</div>
