<script>
import {mapMutations, mapGetters} from 'vuex'
export default {
  name: 'PageHeader',
  computed: {
    ...mapGetters('proxy', ['selectedSite']),
  },
  methods: {
    ...mapMutations('proxy', ['setIsSaveData', 'setIsDeleteData']),
    saveData: function () {
      console.log('saveData')
      return this.setIsSaveData(true)
    },
  }
}
</script>

<template>
  <div class="flex justify-between">
    <div class="flex">
      <a
        href="/#"
        class="text-white block w-fit bg-slate-700 hover:bg-blue-600 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium rounded-full text-sm text-center px-5 py-2.5 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
      >
        <i class="ri-reply-line" />
        На главную
      </a>
      <button 
        :class="`w-fit text-white font-medium rounded-full text-sm px-5 py-2.5 text-center me-2 mx-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 ${!selectedSite ? 'bg-blue-200' : 'bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300'}`"
        :disabled="!selectedSite"
        @click="saveData"
      >
        <i class="ri-save-line cursor-pointer" /> 
        Сохранить изменения
      </button>
    </div>
    <div class="flex test-slate-300 text-xs">
      Версия 1.0.1
    </div>
  </div>
</template>
