<template>
  <div class="limit-defined col-xs-4 col-md-4 card-border-radius-tag margin-adjust shadow-medium">
    <div style="padding-bottom: 17px; padding-top: 9px" class="flex middle-xs nowrap-xs bottom-border-dark-gray text-ellipsis">
      <span class="text-small text-bold full-width text-ellipsis" v-text="getLanguage('label_list_order')"></span>

    </div>
    <br />
    <draggable
      v-bind="dragOptions"
      v-model="ordernationList">
      <div
        v-for="(banner, bannerIndex) in ordernationList"
        style="display: flex; justify-content: space-between !important;height: 72px;"
        class="flex card-border-radius-tag nowrap-xs middle-xs padding-medium bottom-margin-small shadow-small hover:shadow-small-clean cursor-pointer rel">
        <div class="box-images">
          <i class="fa fa-bars"></i>
        </div>
        <div class="flex full-width text-ellipsis">
          <p class="text-small col-xs-offset-1 ">{{ banner.name }}</p>
        </div>
      </div>
    </draggable>
  </div>
</template>

<style scoped src="./styles.css"></style>
<script src="./scripts.js"></script>
