D-Net

<ng-template #info>

  <helper *ngIf="pageContents && pageContents['right'] && pageContents['right'].length > 0"

          [texts]="pageContents['right']"></helper>

  <!--<div class="uk-margin-auto-top uk-margin-remove-bottom  uk-text-bold uk-h4">OpenAIRE gives you the virtual

      environment and services designed for your community to:

  </div>

  <ul class="uk-list uk-list-divider uk-padding uk-padding-remove-left uk-margin-auto-top">

      <li><h5><span class="uk-text-bold">Create and Manage</span> your

          Community Gateway</h5></li>

      <li><h5><span class="uk-text-bold">Access, share and link</span> together all your research</h5></li>

      <li><h5><span class="uk-text-bold">Monitor and report</span> your community's progress</h5></li>

  </ul>-->

</ng-template>

<div class="image-front-topbar"

     uk-scrollspy="{"target":"[uk-scrollspy-class]","cls":"uk-animation-fade","delay":false}"

     tm-header-transparent="light" tm-header-transparent-placeholder="">

  <div

    class="contact-background uk-section-large uk-background-top-center uk-background-norepeat uk-background-cover uk-section-overlap uk-position-relative uk-preserve-color">

    <div style=" min-height: 350px;" class="uk-section uk-flex uk-flex-middle uk-margin-top uk-padding-remove-top">

      <div class="uk-align-center">

        <div *ngIf="showLoading" class="uk-margin-large">

          <div class="uk-animation-fade uk-margin-top  uk-width-1-1" role="alert"><span

            class="loading-gif  uk-align-center"></span></div>

        </div>

        <div *ngIf="!showLoading" class="uk-container uk-container-large">

          <div class="uk-grid-divider" uk-grid>

            <div class="uk-width-1-1 uk-hidden@m">

              <ng-container *ngTemplateOutlet="info"></ng-container>

            </div>

            <div class="uk-width-1-2@m uk-width-1-1@s">

              <div class="uk-margin-auto uk-text-bold uk-h4">Contact us to create your Community Gateway</div>

              <div *ngIf="errorMessage" class="uk-width-1-1 uk-alert uk-alert-danger uk-text-center"

                   role="alert">{{errorMessage}}</div>

              <div class="uk-margin-top" uk-grid>

                <div class="uk-margin-small uk-width-1-1 uk-text-danger uk-text-bold uk-margin-remove-bottom">* Required

                  fields

                </div>

                <div class="uk-width-1-2@s uk-margin-small-top">

                  <label class="uk-h5 uk-text-bold">

                    Name <span class="uk-text-danger uk-text-bold">*</span>

                  </label>

                  <div *ngIf="name.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none">

                    Please add a name.

                  </div>

                  <input class="uk-input" type="text" placeholder="Your Name" [(ngModel)]="contactForm.name" required

                         #name="ngModel">

                </div>

                <div class="uk-width-1-2@s  uk-margin-small-top">

                  <label class="uk-h5 uk-text-bold">

                    Surname <span class="uk-text-danger uk-text-bold">*</span>

                  </label>

                  <div *ngIf="surname.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none">

                    Please add a surname.

                  </div>

                  <input class="uk-input" type="text" placeholder="Your Surname" [(ngModel)]="contactForm.surname"

                         required #surname="ngModel">

                </div>

                <div class="uk-width-1-2@s uk-margin-small-top">

                  <label class="uk-h5 uk-text-bold">

                    Email <span class="uk-text-danger uk-text-bold">*</span>

                  </label>

                  <div *ngIf="sender.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none">

                    Please add an email.

                  </div>

                  <div

                    *ngIf="!sender.invalid && isSubmitted && !contactForm.email.match('^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$')"

                    class=" uk-text-danger uk-text-small style=display:none">Please add a valid email.

                  </div>

                  <input class="uk-input" type="email" placeholder="Your Email" [(ngModel)]="contactForm.email" required

                         #sender="ngModel">

                </div>

                <div class="uk-width-1-2@s uk-margin-small-top">

                  <label class="uk-h5 uk-text-bold">

                    Affiliation <span class="uk-text-danger uk-text-bold">*</span>

                  </label>

                  <div *ngIf="affiliation.invalid && isSubmitted"

                       class=" uk-text-danger uk-text-small style=display:none"> Please add an affiliation.

                  </div>

                  <input class="uk-input" type="text" placeholder="Your Affiliation"

                         [(ngModel)]="contactForm.affiliation" required #affiliation="ngModel">

                </div>

                <label class="uk-width-1-1 uk-h5 uk-text-bold">

                  Community Name <span class="uk-text-danger uk-text-bold">*</span>

                </label>

                <div class="uk-width-1-2@s uk-margin-remove-top">

                  <div *ngIf="community.invalid && isSubmitted"

                       class=" uk-text-danger uk-text-small style=display:none"> Please add a community name.

                  </div>

                  <input class="uk-input" type="text" placeholder="Your Community Name"

                         [(ngModel)]="contactForm.community" required #community="ngModel">

                </div>

                <label class="uk-width-1-1 uk-h5 uk-text-bold">

                  Message <span class="uk-text-danger uk-text-bold">*</span>

                </label>

                <div class="uk-width-1-1 uk-margin-remove-top">

                  <div *ngIf="message.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none">

                    Please write us a message.

                  </div>

                  <textarea rows="4" class="uk-textarea" type="text" placeholder="Your message"

                            [(ngModel)]="contactForm.message" required #message="ngModel"></textarea>

                </div>

                <div class="uk-width-1-1">

                  <div *ngIf="!contactForm.recaptcha && isSubmitted"

                       class=" uk-text-danger uk-text-small style=display:none"> Please complete reCaptcha challenge.

                  </div>

                  <re-captcha #recaptcha (resolved)="handleRecaptcha($event)" [(siteKey)]="properties.reCaptchaSiteKey"

                              required></re-captcha>

                </div>

                <div class="uk-width-1-1 uk-text-right">

                  <button class="uk-button uk-button-default uk-margin-small-right" (click)="reset()">Reset</button>

                  <button class="uk-button portal-button" (click)="send()">Send</button>

                </div>

              </div>

            </div>

            <div class="uk-width-1-2 uk-visible@m">

              <ng-container *ngTemplateOutlet="info"></ng-container>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</div>

<modal-alert #AlertModal (alertOutput)="goToHome($event)">

  <div class="uk-text-center">

    Our team will respond to your submission soon.<br>

    Press OK to redirect to OpenAIRE Connect home page.

  </div>

</modal-alert>