<div id='app'>
  <div v-html='header'></div>
  
  <div :class='classes.form'>
    
    <input type='email' v-model='form.email' placeholder='Email' />
    <span v-if='form.errors().has("email")' :class='classes.danger'>
      {{ form.errors().get('email') }}
    </span>
    
    <input type='password' v-model='form.password' placeholder='Password' />
    <span v-if='form.errors().has("password")' :class='classes.danger'>
      {{ form.errors().get('password') }}
    </span>
    
    <input type='password' v-model='form.password_confirmation' placeholder='Confirm Password' />
    <span v-if='form.errors().has("password_confirmation")' :class='classes.danger'>
      {{ form.errors().get('password_confirmation') }}
    </span>
    
    <button :class='classes.btn' :disabled='form.empty()' @click='submit'>
        Complete
    </button>
  </div>
  
</div>

body {
  background-color: #f5f5f5;
}
input, button {
  border: 1px solid #d5d5d5;
  border-radius: 3px;
  height: 50px;
  width: 50%;
  margin-top: 10px;
  padding: 5px;
}
.messages-container {
  padding: 10px;
  position:relative; 
  bottom: 110px;
  left: 4.45%;
  width: 50vw;
}
button:disabled {
  opacity: 0.5 !important;
}

h1, h2 {
  color: #333333b3;
  font-weight: heavy;
}

#app {
  div.danger {
    border: 1px solid #de3618;
    background-color: #de3618;
  }
  
  padding-bottom: 15px;
}

.form {
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
}

new Vue({
    el: '#app',
   
    data: () => ({
        form: form.default({
            email: '',
            password: '',
            password_confirmation: ''
        })
        .rules({
            email: 'email|min:5|required',
            password: 'required|min:5|confirmed',
            password_confirmation: 'required',
        })
        .messages({
            'email.email': ':attribute must be a valid email',
            'email.min': ':attribute may not have less than :min characters',
            'password.confirmed': "Password must have the same value as password confirmation"
        }),
   }),
    
    methods: {
       submit() {
          if (this.form.validate().errors().any()) return;
         
          alert('Successfully Passed Validation!');
        },
       
    },
  
  
  
  
  
    /** Helpers stored in computed to clean up purpose of pen **/
    computed: {
      header: $this => $this.form.errors().any() 
        ? `<div class="w-full flex">${$this.npm} ${$this.github}</div><div class='text-center w-1/2'>${$this.title}</div>` 
        : `<div class="w-full flex">${$this.npm} ${$this.github}</div><div><div class='text-center w-1/2'>${$this.title}</div></div>`,
      
      title: $this =>`  
        <h1 class='${$this.classes.h1}'>VueForm.js Example One</h1>
        <h2 class='${$this.classes.h2}'>(Form Only Validates On Submission)</h2>
      `,
      links: $this => $this.errors().any() ? ``: `<div class="${$this.classes.banner}"> ${$this.github + $this.html}</div>`,
      
      classes: $this => ({
        h1: 'text-4xl mt-8',
        h2: 'text-2sm',
        header: 'text-center mb-8 text-2xl',
        banner: 'flex w-full justiy-center mb-8',
        container: 'flex justify-around align-items-stretch',
        form: 'w-100%',
        errors: 'border border-gray-400 bg-white rounded messages-container w-100%',
        danger: 'mb-3 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded',
        btn: 'bg-blue-500 text-white font-bold py-2 px-4 rounded-full w-1/2 mt-4',
      }),
      npm: () => `
        <div class="bg-red-700 text-center py-4 lg:px-4 w-1/2">
           <div class="p-2 bg-white items-center text-grey-100 leading-none lg:rounded-full flex lg:inline-flex" role="alert">
              <a href='https://www.npmjs.com/package/vuejs-form'>
                <span class="flex rounded-full b-white-500 px-2 py-1 text-xs font-bold ml-2">Npm Package</span>
  
              </a>
              <svg class="fill-current opacity-75 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                <path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z"/>
              </svg>
            </div>
        </div>
      `,
    
      github: () => `
          <div style='background-color: #24292e;' class="w-1/2 text-center py-4 lg:px-4">
            <div class="p-2 bg-white items-center text-grey-100 leading-none lg:rounded-full flex lg:inline-flex" role="alert">
              <a href='https://github.com/zhorton34/vuejs-form'>
                <span class="flex rounded-full b-white-500 px-2 py-1 text-xs font-bold ml-2">Github Repository</span>
              </a>
              <svg class="fill-current opacity-75 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                <path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z"/>
              </svg>
          </div>
        </div>
      `,
    }
 });