
<template>
  <div v-if="visible" class="fotkipress-create-directory-window">
    <div class="fotkipress-modal-window-content">
      <h2>Create directory</h2>

      <div class="error" v-if="hasErrors()">
        <p v-for="error in errors">
          <strong>ERROR:</strong> {{error}}
        </p>
      </div>

      <table class="form-table">
        <tbody>
          <tr>
            <th scope="row"><label for="directoryName">Name</label></th>
            <td>
              <input v-model="directory.name" name="directoryName" id="directoryName" type="text" value="" class="regular-text"/>
            </td>
          </tr>
        </tbody>
      </table>

      <div>
        <input type="submit" class="button button-primary" value="Create" @click="create($event)"/>
        <input type="submit" class="button button-primary" value="Cancel" @click="cancel($event)"/>
      </div>
    </div>
  </div>
</template>


<script>
export default {
    props: {
        visible: {
            type: Boolean,
            required: true
        },
        errors: {
            type: Array,
            required: true
        },
        onsubmit: {
            type: Function,
            required: true
        },
        oncancel: {
            type: Function,
            required: true
        }
    },

    data() {
        return {
            directory: {
                name: ''
            }
        };
    },

    methods: {
        hasErrors() {
            return this.errors.length > 0;
        },

        create(evt) {
            evt.preventDefault();

            if (!this.directory.name) {
                return;
            }

            this.onsubmit(this.directory.name);
            this.directory.name = '';
        },

        cancel(evt) {
            evt.preventDefault();
            this.directory.name = '';
            this.oncancel();
        }
    }
};
</script>
