datacite/bracco

<div class="panel panel-transparent" id="add-provider-contact-form">
  <div class="panel-body">
    <div class="col-md-9 col-md-offset-3">
      <h3 class="edit">
        Add Contact
      </h3>
      {{#each this.flashMessages.queue as |flash|}}
        <FlashMessage @flash={{flash}} />
      {{/each}}
    </div>
    <BsForm
      @formLayout="horizontal"
      class="form-horizontal"
      @horizontalLabelGridClass="col-md-3"
      @model={{this.model.contact}}
      @onSubmit={{action 'submit' this.model.contact this.model}}
      @submitOnEnter={{true}} as |form|
    >
      <form.element
        @controlType="text"
        id="givenName"
        class="form-group"
        @label="Given Name"
        @property="givenName" as |el|
      >
        <el.control id="givenName-field" />
      </form.element>
      <form.element
        @controlType="text"
        id="familyName"
        class="form-group"
        @label="Family Name"
        @property="familyName" as |el|
      >
        <el.control id="familyName-field" />
      </form.element>
      <form.element
        @controlType="email"
        class="form-group"
        id="email"
        @label="Email"
        @property="email"
        @helpText="Please enter a valid email address." as |el|
      >
        <el.control id="email-field" />
      </form.element>
      <div class="col-md-9 col-md-offset-3">
        <BsAlert @dismissible={{false}} @type="warning">
          The contact entered may receive notifications about administration, webinars, product testing, 
          or news that will impact the use of DataCite services and/or membership. Individuals may remove 
          themselves from mailings by following the unsubscribe link provided in every DataCite email. 
          For information about our privacy practices and commitment to protecting your privacy, please 
          review our
          <a
            target="_blank" rel="noopener noreferrer" href={{get (links) "PRIVACY_POLICY_URL" }}
          >
            Privacy Policy
          </a>
          .
        </BsAlert>
      </div>
      <div class="col-md-9 col-md-offset-3">
        {{#if (is-empty (contact-form-errors this.model.contact))}}
          <button
            type="submit"
            id="add-contact"
            class="btn btn-sm btn-fill"
            disabled={{false}}
          >
            Add Contact
          </button>
        {{else}}
          <BsAlert @dismissible={{false}} @type="danger">
            To save this contact, first resolve the errors with these fields:
            {{contact-form-errors this.model.contact}}
            .
          </BsAlert>
          <button
            type="submit"
            id="add-contact"
            class="btn btn-sm btn-fill"
            disabled={{true}}
          >
            Add Contact
          </button>
        {{/if}}
        <button class="btn btn-sm" type="button" {{action 'cancel'}}>
          Cancel
        </button>
      </div>
    </BsForm>
  </div>
</div>