<template>
  <div>
    <h1 data-cy="join-form-title">{{ title }}</h1>
    <div>
      <div class="skillboxform-input">
        <label
          for="join-code"
          class="skillboxform-input__label">{{ labelText }}</label>
        <input
          :class="{'skillboxform-input__input--error': error}"
          :value="value"
          class="skillbox-input skillboxform-input__input"
          data-cy="join-form-input"
          id="join-code"
          @input="$emit('input', $event)">
        <small
          class="skillboxform-input__error"
          v-if="error"
        >{{ error }}
        </small>
      </div>

      <div>
        <a
          class="button button--primary button--big"
          data-cy="join-form-confirm"
          @click="$emit('confirm', value)">{{ okText }}</a>
        <button
          class="button button--big"
          data-cy="join-form-cancel"
          @click="$emit('cancel')">{{ cancelText }}
        </button>
      </div>

    </div>
  </div>
</template>

<script>
  export default {
    props: {
      title: {
        type: String,
        default: ''
      },
      value: {
        type: String,
        default: ''
      },
      error: {
        type: String,
        default: ''
      },
      okText: {
        type: String,
        default: 'Klasse beitreten'
      },
      labelText: {
        type: String,
        default: 'Zugangscode eingeben'
      },
      cancelText: {
        type: String,
        default: 'Abmelden'
      }
    }
  };
</script>

<style scoped lang="scss">
  @import '~styles/helpers';

</style>
