<script>
import TaskModal from './TaskModal.vue'
import TaskHistory from './TaskHistory.vue'

export default {
  name: 'TaskComponent',
  components: {
    TaskModal,
    TaskHistory
  },
  props: {
    index: {
      default: 0,
      type: Number
    }
  },
  data() {
  },
  computed: {
  },
  methods: {
  }
}

</script>

<template>
  <div class="flex justify-between w-full border border-slate-300 p-1 flex-col md:flex-row hover:bg-slate-300 hover:border-slate-600 transition-all">
    <div class="flex gap-1 items-center">
      <div>
        <div class="flex justify-center">
          <div class="form-check form-switch">
            <label class="relative inline-flex items-center cursor-pointer">
              <input
                type="checkbox"
                value=""
                class="sr-only peer"
                checked
              >
              <div class="w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-2 peer-focus:ring-green-700 dark:peer-focus:ring-green-800 dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-green-600" />
            </label>
          </div>
        </div>
      </div>
      <div>Название: askr_locations_speed_limit_calc</div>
      <div>Описание: Поиск случаев превышения автомобилями скорости передвижения по автодорогам</div>
      <div
        id="calc_period_59"
        current-period="3600000"
        phx-hook="TimeConvert"
      >
        Период: кажды(й/е) час
      </div>
    </div>
    <div class="flex gap-2">
      <div>
        <TaskHistory>
          <template #button>
            <i class="cursor-pointer ri-eye-line" />
          </template>
        </TaskHistory>
      </div>
      <div>
        <TaskModal>
          <template #button>
            <i class="cursor-pointer ri-pencil-line" />
          </template>
        </TaskModal>
      </div>
      <div x-data="{ open: false }">
        <i
          x-show="!open"
          class="cursor-pointer ri-delete-bin-line text-red-500"
          @click="open = true"
        />
        <div
          class="flex my_margin-2 items-center"
          x-show="open"
          style="display: none;"
          @click="open = false"
        >
          <span
            phx-click="delete_period"
            phx-value-id="59"
            class="cursor-pointer p-0.5 border rounded text-red-600 border-red-600 mr-2"
          >Удалить</span>
          <span
            class="cursor-pointer rounded p-0.5 border border-slate-600 text-slate-600"
            @click="open = false"
          >Отмена</span>
        </div>
      </div>
    </div>
  </div>
</template>
