<div class="row">
  <div class="col-md-10 col-md-offset-1">
    <div class="btn-group pull-right">
      <button type="button" class="btn btn-primary"
              x-ng-click="upload_proposition.changeLanguage('en')">
        {{'LANGUAGE.ENGLISH' | translate}}
      </button>
      <button type="button" class="btn btn-primary"
              x-ng-click="upload_proposition.changeLanguage('fr')">
        {{'LANGUAGE.FRENCH' | translate}}
      </button>
    </div>
    <p style="background-color: #dff0d8; padding: 15px;"
       x-ng-show="upload_proposition.confirmed">
      <i class="fa fa-check fa-4x"></i>{{'PARAGRAPH.CONFIRMATION' | translate}}
    </p>
    <div x-ng-hide="upload_proposition.confirmed">
      <p>
        {{'PARAGRAPH.DESCRIPTION' | translate}}
      </p>
      <form name="uploadPropositionForm">
        <fieldset>
          <legend>
            {{'LEGEND_USER' | translate}}
          </legend>
          <div class="col-md-8 col-md-offset-2">
            <div class="form-group">
              <div class="row">
                <div class="col-md-6">
                    <!--[if IE 9]>
                    <label for="firstName">{{'FORM.FIRSTNAME' | translate}}</label>
                    <![endif]-->
                    <input type="text" class="form-control" name="firstName" id="firstName"
                         placeholder="{{'FORM.FIRSTNAME' | translate}}"
                         x-ng-model="upload_proposition.form.firstName"
                         x-validator="required"
                         x-required-error-message="{{'FORM.REQUIRED_FIELD' | translate}}"
                         x-valid-method="blur">
                </div>
                <div class="col-md-6">
                    <!--[if IE 9]>
                    <label for="lastName">{{'FORM.LASTNAME' | translate}}</label>
                    <![endif]-->
                    <input type="text" class="form-control" name="lastName" id="lastname"
                         placeholder="{{'FORM.LASTNAME' | translate}}"
                         x-ng-model="upload_proposition.form.lastName"
                         x-validator="required"
                         x-required-error-message="{{'FORM.REQUIRED_FIELD' | translate}}"
                         x-valid-method="blur">
                </div>
              </div>
            </div>
            <div class="form-group">
                <!--[if IE 9]>
                <label for="senderEmail">{{'FORM.SENDER_EMAIL' | translate}}</label>
                <![endif]-->
                <input type="text" class="form-control" name="senderEmail" id="senderEmail"
                     placeholder="{{'FORM.SENDER_EMAIL' | translate}}"
                     x-ng-model="upload_proposition.form.mail"
                     x-validator="email"
                     x-email-error-message="{{'FORM.REQUIRED_OR_INVALID_FIELD' | translate}}"
                     x-valid-method="blur">
              <span class="help-block">{{'FORM.EXAMPLE_SENDER' | translate}}</span>
            </div>
            <div class="form-group">
                <!--[if IE 9]>
                <label for="targetEmail">{{'FORM.RECIPIENT_EMAIL' | translate}}</label>
                <![endif]-->
                <input type="text" class="form-control" name="targetEmail" id="targetEmail"
                     placeholder="{{'FORM.RECIPIENT_EMAIL' | translate}}"
                     x-ng-model="upload_proposition.form.recipientMail"
                     x-validator="email"
                     x-email-error-message="{{'FORM.REQUIRED_OR_INVALID_FIELD' | translate}}"
                     x-valid-method="blur">
              <span class="help-block">{{'FORM.EXAMPLE_RECIPIENT' | translate}}</span>
            </div>
          </div>
        </fieldset>
        <fieldset>
          <legend>
            {{'LEGEND_PROPOSAL' | translate}}
          </legend>
          <div class="col-md-8 col-md-offset-2">
            <div class="form-group">
                <!--[if IE 9]>
                <label for="subject">{{'FORM.SUBJECT' | translate}}</label>
                <![endif]-->
                <input type="text" class="form-control" name="subject" id="subject"
                     placeholder="{{'FORM.SUBJECT' | translate}}"
                     x-ng-model="upload_proposition.form.subject"
                     x-validator="required"
                     x-required-error-message="{{'FORM.REQUIRED_FIELD' | translate}}"
                     x-valid-method="blur">
            </div>
            <div class="form-group">
                <!--[if IE 9]>
                <label for="content">{{'FORM.CONTENT' | translate}}</label>
                <![endif]-->
                <textarea class="form-control" name="content" id="content"
                     placeholder="{{'FORM.CONTENT' | translate}}"
                     x-ng-model="upload_proposition.form.body"
                     x-validator="required"
                     x-required-error-message="{{'FORM.REQUIRED_FIELD' | translate}}"
                     x-valid-method="blur">
                </textarea>
            </div>
          </div>
        </fieldset>
        <fieldset x-ng-if="upload_proposition.recaptchaPublicKey">
          <legend>
            {{'LEGEND_VALIDATE' | translate}}
          </legend>
          <div class="col-md-8 col-md-offset-2">
            <div x-vc-recaptcha
                 x-tabindex="3"
                 x-theme="clean"
                 x-lang="{{upload_proposition.getLanguage()}}"
                 x-key="upload_proposition.recaptchaPublicKey">
            </div>
          </div>
        </fieldset>
        <br>
        <div class="form-group">
          <div class="controls">
            <button type="button" class="btn btn-warning" id="reset"
            	x-validation-reset="uploadPropositionForm">
              {{'FORM_ACTIONS.RESET' | translate}}
            </button>
            <button type="submit" class="btn btn-success" id="submit"
            	x-validation-submit="uploadPropositionForm"
            	x-ng-click="upload_proposition.submit()">
              {{'FORM_ACTIONS.SUBMIT' | translate}}
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
