<template>
  <modal
    name="user-create-edit"
    :scrollable="true"
    height="auto"
    :no-close-on-backdrop="true"
    :header-bg-variant="null"
    @closed="$emit('closed')"
    @before-open="beforeOpenModal"
  >
    <b-row class="d-flex justify-content-between mb-2 mt-1">
      <b-col class="d-flex modal-text-color ml-2" cols="8">
        <div class="d-flex align-self-center justify-content-center rounded-div mr-2 mt-1">
          <font-awesome-icon icon="user" class="align-self-center" />
        </div>
        <div class="pt-1">
          <div class="inline-block akkurat-regular min-header-text">Usuário</div>
          <div class="akkurat-bold max-header-text title">{{user.name}}</div>
        </div>
      </b-col>
      <b-col class="d-flex justify-content-end mr-2 mt-1">
        <span class="close-icon" @click="closeModal">
          <font-awesome-icon icon="times" class="align-self-center" />
        </span>
      </b-col>
    </b-row>

    <b-form @submit.prevent="save" @reset.prevent="reset">
      <b-row class="m-2">
        <b-col cols="12" class="mb-2">
          <text-input required v-model="user.name" title="Nome" placeHolder="Digite o nome" />
        </b-col>

        <b-col cols="12" class="mb-2">
          <email required v-model="user.email" title="Email" />
        </b-col>

        <b-col cols="12" class="mb-2">
          <text-input
            required
            v-model="user.username"
            title="Nome de Usuário"
            placeHolder="Digite o username"
          />
        </b-col>

        <b-col cols="12" class="mb-2">
          <text-input v-model="user.ramal" title="Ramal" placeHolder="Digite o ramal" />
        </b-col>

        <b-col cols="12" class="mb-2">
          <select-input
            title="Role:"
            v-model="user.role"
            :options="roles"
          />
        </b-col>

        <b-col cols="12" class="mb-2">
          <text-input
            id="password"
            inputType="password"
            
            title="Senha"
            v-model="user.password"
            placeHolder="Digite a senha"
          />
        </b-col>

        <b-col cols="12" class="mb-2">
          <text-input
            id="confirmPassword"
            inputType="password"
            
            v-model="user.password_confirmation"
            title="Confirmar senha"
            placeHolder="Confirme a senha"
          />
        </b-col>
      </b-row>
      <b-row class="justify-content-end">
        <b-col cols="3">
          <b-button variant="primary" type="submit">Salvar</b-button>
        </b-col>
        <b-col cols="3" class="mr-4 mb-3">
          <b-button type="reset">Cancelar</b-button>
        </b-col>
      </b-row>
    </b-form>
  </modal>
</template>
<script src="./user-detail.js" lang="js" />
<style scoped lang="scss" src="./user-detail.scss" />
