<template>
  <div v-if="insideModal === false" class="loading">
    <i v-if="flag.loading" class="fa fa-circle-o-notch fa-spin fa-2x fa-fw" />
    <span class="sr-only">{{ $t("loading") }}</span>
  </div>

  <div v-if="errorMsg && errorMsg.length > 0" class="alert alert-danger">
    {{ errorMsg }}
  </div>

  <h4 class="h3">
    {{ $t("address_suggestions") }}
  </h4>

  <div class="flex-table AddressSuggestionList">
    <div
      v-for="(a, i) in context.suggestions"
      class="item-bloc"
      :key="`suggestions-${i}`"
    >
      <div class="float-button bottom">
        <div class="box">
          <div class="action">
            <!-- QUESTION normal que ça vienne avant l'adresse ? pourquoi pas après avoir affiché le address-render-box ? -->
            <ul class="record_actions">
              <li>
                <button
                  class="btn btn-sm btn-choose"
                  @click="this.pickAddress(a)"
                >
                  {{ $t("use_this_address") }}
                </button>
              </li>
            </ul>
          </div>
          <ul class="list-content fa-ul">
            <li>
              <i class="fa fa-li fa-map-marker" />
              <address-render-box :address="a" />
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <action-buttons
    v-if="insideModal === false"
    :options="this.options"
    :defaultz="this.defaultz"
  >
    <template #before>
      <slot name="before" />
    </template>
    <template #action>
      <slot name="action" />
    </template>
    <template #after>
      <slot name="after" />
    </template>
  </action-buttons>
</template>

<script>
import AddressRenderBox from "ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue";
import ActionButtons from "./ActionButtons.vue";

export default {
  name: "SuggestPane",
  components: {
    AddressRenderBox,
    ActionButtons,
  },
  props: [
    "context",
    "options",
    "defaultz",
    "flag",
    "entity",
    "errorMsg",
    "insideModal",
  ],
  computed: {},
  methods: {
    pickAddress(address) {
      console.log("pickAddress in suggest pane", address);
      this.$emit("pickAddress", address);
    },
  },
};
</script>
