<template>
  <div v-if="!loading" class="relays-container">
    <div class="follow-relay-container">
      <el-input v-model="newRelay" :placeholder="$t('settings.followRelay')" class="follow-relay" @keyup.enter.native="followRelay"/>
      <el-button type="primary" @click.native="followRelay">{{ $t('settings.follow') }}</el-button>
    </div>
    <el-table :data="relays">
      <el-table-column
        :label="$t('settings.instanceUrl')"
        prop="actor"/>
      <el-table-column
        :label="$t('settings.followedBack')"
        prop="followed_back"
        width="120"
        align="center">
        <template slot-scope="scope">
          <i :class="scope.row.followed_back ? 'el-icon-check' : 'el-icon-minus'"/>
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.actions')" fixed="right" width="120" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click.native="deleteRelay(scope.row.actor)">
            {{ $t('table.delete') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'Relays',
  data() {
    return {
      newRelay: ''
    }
  },
  computed: {
    relays() {
      return this.$store.state.relays.fetchedRelays
    },
    loading() {
      return this.$store.state.relays.loading
    }
  },
  mounted() {
    this.$store.dispatch('FetchRelays')
  },
  methods: {
    followRelay() {
      this.$store.dispatch('AddRelay', this.newRelay)
    },
    deleteRelay(relay) {
      this.$store.dispatch('DeleteRelay', relay)
    }
  }
}
</script>

<style rel='stylesheet/scss' lang='scss'>
@import '../styles/main';
@include settings
</style>