<template lang="pug">
  modal(:show='show', @close='close')
    .modal-header
      h3 Ban user
    .modal-body
      .message.error(v-if='error') {{ error }}
      input(type='hidden', name='user_id', :value='id')
      label(for='reason') Reason
      input#reason(type='text', name='reason', v-model='reason')
      label(for='expires_at') Expires
      input#expires_at(type='date', name='expires_at', v-model='expires_at')
    .modal-footer.text-right
      button(@click='submit') Ban
      button(@click='close') Cancel
</template>

<script type="text/javascript">
  import Modal from './Modal.vue'
  const csrfToken = document.querySelector('meta[name="csrf-token"]').content

  export default {
    props: ['show', 'id'],
    data: function () {
      return {
        error: '',
        reason: '',
        expires_at: null
      }
    },
    components: {
      Modal
    },
    methods: {
      close: function () {
        this.$emit('close')
        this.error = ''
        this.reason = ''
        this.expires_at = null
      },
      submit: function () {
        this.$http.post('/admin/api/ban', {
          user_id: this.id,
          reason: this.reason,
          expires_at: this.expires_at,
          csrf: csrfToken
        }).then(data => {
          this.close()
          this.$root.$emit('reload_bans')
        }).catch(err => {
          console.log(err)
          if (err.body && err.body.error) this.error = err.body.error
        })
      }
    }
  }
</script>
