{{ header }}
  <section class="container-fluid" id="root">
    {{ breadcrumbs }}
    <div class="row">
      <div class="col-md-4 hidden-md-down">
        {{ account }}
      </div>
      <div class="background-dark-gray box-shadow-dark col-xs-12 col-md-8 top-margin-medium content-listing rounded-large hidden" id="gift-lists">
        <div class="content-box">
          <template v-if="listas.length">
            <div class="flex between-xs middle-xs">
              <span class="text-h1-title" v-text="language.giftList_title"></span>
              <div class="resize-responsive">
                <base-button
                  apperance="neutral-black"
                  class="gift-btn gift-btn__common"
                  square
                  size="medium"
                  title="Clique para adicionar nova lista de presentes"
                  :loading="btnAddList"
                  @click.native="onAddList()"
                >
                  { language.button_new }
                </base-button>
              </div>
            </div>
            <template v-for="(list, index) in listas">
              <base-listing
                :subtitle="language.column_name"
                :subtitlevalue="list.nome"
                :subtitlesecond="language.column_status"
                :subtitlesecondvalue="list.status"
                :showicon="false"
                title-size="medium"
                class="top-margin-medium"
                :border-status-color="listStatus(list.status)"
              >
                <div class="content-listing-card">
                  <div class="col-md-12 col-xs-12 flex no-padding">
                    <div class="col-md-8 flex no-padding">
                      <div class="col-md-6 col-xs-12 no-padding">
                        <span class="visible-block text-small text-gray" v-text="language.column_validade"></span>
                        <span class="visible-block text-medium text-dark-opacity text-bold" v-text="list.data_validade"></span>
                      </div>
                      <div class="col-md-6 col-xs-12 no-padding top-margin-responsive">
                        <span class="visible-block text-small text-gray" v-text="language.column_evento"></span>
                        <span class="visible-block text-medium text-dark-opacity text-bold" v-text="list.data_evento"></span>
                      </div>
                      <div class="col-md-6 col-xs-12 no-padding top-margin-medium">
                        <span class="visible-block text-small text-gray" v-text="language.column_categoria"></span>
                        <span class="visible-block text-medium text-dark-opacity text-bold" v-text="list.categoria"></span>
                      </div>
                      <div class="col-md-6 col-xs-12 no-padding top-margin-medium">
                        <span class="visible-block text-small text-gray" v-text="language.column_itens"></span>
                        <span class="visible-block text-medium text-dark-opacity text-bold" v-text="list.itens"></span>
                      </div>
                    </div>
                    <div class="col-md-4 col-xs-12 flex column bottom-xs no-padding">
                      <div class="resize-responsive">
                        <base-button
                          apperance="neutral-white"
                          class="gift-btn gift-btn__common text-medium bottom-margin-medium"
                          square
                          size="small"
                          title="Clique para deletar a lista de presentes"
                          v-text="language.text_deleteList"
                          style="height: 44px;"
                          @click.native="onOpen(list.id)"
                        >
                        </base-button>
                        <base-button
                          apperance="neutral-black"
                          class="gift-btn gift-btn__common text-medium"
                          square
                          size="small"
                          title="Clique para ver detalhes da lista de presentes"
                          v-text="language.text_details"
                          :href="list.href"
                          style="height: 44px;"
                        >
                        </base-button>
                      </div>
                    </div>
                  </div>
                </div>
              </base-listing>
            </template>
          </template>
          <template v-else>
            <span class="text-h1-title" v-text="language.giftList_title"></span>
            <div class="flex flex-row center-xs background-white rounded-large box-shadow-light horizontal-padding-medium top-margin-medium">
              <span class="full-width text-center text-dark-opacity text-medium top-margin-large" v-text="language.text_empty"></span>
              <base-button
                  apperance="neutral-black"
                  class="gift-btn gift-btn__common gift-btn__common--empty margin-medium"
                  square
                  size="medium"
                  title="Clique para adicionar nova lista de presentes"
                  :loading="btnAddList"
                  @click.native="onAddList()"
                >
                  { language.button_new }
                </base-button>
            </div>
          </template>
        </div>
      </div>
    </div>
    <base-modal
      v-if="showModal"
      :title="language.text_modal_title"
      size="medium"
      @close="onClose"
    >
      <div class="text-center">
        <span v-text="language.text_description"></span>
        <div class="flex gap-2 center-xs top-margin-medium">
          <base-button
            apperance="confirm"
            square
            size="medium"
            @click.native="onRemoveList"
            v-text="language.text_confirm">
          </base-button>
          <base-button
            apperance="cancel"
            square
            size="medium"
            @click.native="onClose"
            v-text="language.text_cancel">
          </base-button>
        </div>
      </div>
    </base-modal>
  </section>
{{ footer }}

<script type="text/javascript">
	const DATA = {{ dataVue|json_encode() }};
</script>