<section class="page-section" id="contact">
  <h2 class="span1">LISTA DE LOJAS CADASTRADAS</h2>
  <div
    class="container"
    style="max-width: 1000px; padding-left: 5px; padding-right: 5px"
  >
    <div class="">
      <a routerLink="/form-loja" class="btn btn-primary">Adicionar novo</a>
    </div>
    <div class="card-body">
      <div class="table-responsive">
        <table class="table" cellspacing="0" width="100%">
          <thead>
            <tr>
              <th>Nome</th>
              <th>Endereço</th>
              <th>Numero</th>
              <th>Bairro</th>
              <th>Cidade</th>
              <th class="text-center">Ações</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let loja of lojas">
              <th scope="row">{{ loja.nome }}</th>
              <td>{{ loja.logradouro }}</td>
              <td>{{ loja.numero }}</td>
              <td>{{ loja.bairro }}</td>
              <td>{{ loja.cidade }}</td>
              <td class="d-flex justify-content-center">
                <div class="">
                  <a
                    class="btn btn-warning"
                    routerLink="/form-loja/{{loja.id}}"
                  >
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      fill="currentColor"
                      class="bi bi-pen"
                      viewBox="0 0 16 16"
                    >
                      <path
                        d="m13.498.795.149-.149a1.207 1.207 0 1 1 1.707 1.708l-.149.148a1.5 1.5 0 0 1-.059 2.059L4.854 14.854a.5.5 0 0 1-.233.131l-4 1a.5.5 0 0 1-.606-.606l1-4a.5.5 0 0 1 .131-.232l9.642-9.642a.5.5 0 0 0-.642.056L6.854 4.854a.5.5 0 1 1-.708-.708L9.44.854A1.5 1.5 0 0 1 11.5.796a1.5 1.5 0 0 1 1.998-.001zm-.644.766a.5.5 0 0 0-.707 0L1.95 11.756l-.764 3.057 3.057-.764L14.44 3.854a.5.5 0 0 0 0-.708l-1.585-1.585z"
                      />
                    </svg>
                  </a>
                </div>
                <div style="padding-left: 1px">
                  <button class="btn btn-danger" (click)="excluir(loja)">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      fill="currentColor"
                      class="bi bi-trash3"
                      viewBox="0 0 16 16"
                    >
                      <path
                        d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5ZM11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H2.506a.58.58 0 0 0-.01 0H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1h-.995a.59.59 0 0 0-.01 0H11Zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5h9.916Zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47ZM8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5Z"
                      />
                    </svg>
                  </button>
                </div>
                <div style="padding-left: 1px">
                  <button class="btn btn-info" (click)="openModal(content)">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      fill="currentColor"
                      class="bi bi-collection"
                      viewBox="0 0 16 16"
                    >
                      <path
                        d="M2.5 3.5a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm2-2a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM0 13a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 16 13V6a1.5 1.5 0 0 0-1.5-1.5h-13A1.5 1.5 0 0 0 0 6v7zm1.5.5A.5.5 0 0 1 1 13V6a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-13z"
                      />
                    </svg>
                  </button>
                </div>
              </td>
              <ng-template #content let-modal class="w-100">
                <div class="modal-header">
                  <h4 class="modal-title" id="modal-basic-title">
                    Detalhes da Loja
                  </h4>
                  <button
                    type="button"
                    class="btn-close"
                    aria-label="Close"
                    (click)="modal.dismiss('Cross click')"
                  ></button>
                </div>
                <div class="modal-body">
                  <b>Nome:</b> {{ loja.nome }} <br />
                  <b>Endereço:</b> {{ loja.logradouro }}<br />
                  <b>Numero:</b> {{ loja.numero }}<br />
                  <b>Bairro:</b> {{ loja.bairro }}<br />
                  <b>Cep:</b> {{ loja.cep }}<br />
                  <b>Estado:</b> {{ loja.estado }}<br />
                  <b>Cidade:</b> {{ loja.cidade }}<br />
                  <p *ngIf="loja.complemento">
                    <b>complemento:</b> {{ loja.complemento }}
                  </p>
                  <google-map [center]="{lat: loja.latitude, lng: loja.longitude}">
                    <map-marker
                      [position]="{lat: loja.latitude, lng: loja.longitude}"
                    ></map-marker>
                  </google-map>
                </div>
                <div class="modal-footer">
                  <button
                    type="button"
                    class="btn btn-outline-dark"
                    (click)="modal.close('Save click')"
                  >
                    Fechar
                  </button>
                </div>
              </ng-template>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</section>
