@extends('frontend.main.main_nofooter')
@section('content')
  <div class="split-layout">
    <div class="columns is-desktop">
      <div class="column is-11-of-24 is-hidden-touch left-image-container"></div>
      <div class="column is-13-of-24 is-offset-1-of-24 right-content-container">
        <div class="right-content image-uploader">
          <h1>{{ Lang::get('frontend.get_involved.title') }}</h1>
          <h4>{{ Lang::get('frontend.get_involved.subtitle') }}</h4>
          <p class="terms-description">{{ Lang::get('frontend.get_involved.terms', ['link' => lang_url('terms-condition')]) }}</p>
          <form class="upload">
            <div class="columns">
              <div class="column left-column">
                <div class="user-data-form">
                  <div class="email-container">
                    <label for="email">{{ Lang::get('frontend.get_involved.label.email') }}</label>
                    <div class="email-input">
                      <input id="email" type="email" name="email" class="ami-input trackable" required
                             data-ga-event="fillinEmail">
                      <i class="icon-ok success"></i>
                      <i class="icon-cancel error"></i>
                      <div class="validation-message"></div>
                    </div>
                  </div>
                  <div class="recaptcha">
                    <div class="g-recaptcha" data-theme="dark"
                         data-sitekey="{{ Config::get('project/recaptcha.clientKey') }}"
                         data-callback="validateRecaptcha"></div>
                  </div>
                  <div class="js-terms-and-conditions">
                    <input type="checkbox" name="terms-and-conditions" id="terms-and-conditions">
                    <label for="terms-and-conditions">{{ Lang::get('frontend.get_involved.label.terms', ['link' => lang_url('terms-condition')]) }}</label>
                  </div>
                </div>
              </div>
              <div class="column right-column">
                <div class="image-editting-column">
                  <div class="dropzone-net trackable" id="dropzone-net" data-ga-event="uploadImage">
                    <div class="image-editor"></div>
                    <div class="dz-default dz-message">
                      <div class="for-desktop">
                        <i class="icon-upload"></i>
                        <div>{{ Lang::get('frontend.get_involved.uploader.dragndrop') }}</div>
                        <div class="">{{ Lang::get('frontend.get_involved.uploader.divider') }}</div>
                        <a href="#" class="ami-link">{{ Lang::get('frontend.get_involved.uploader.link') }}</a>
                      </div>
                      <div class="for-mobile">
                        <button type="button"
                                class="ami-button">{{ Lang::get('frontend.get_involved.uploader.cta_load') }}</button>
                      </div>
                    </div>
                    <div class="file-error-message-overlay hidden">
                      <div class="file-error-message"></div>
                    </div>
                    <i class="icon-trash js-remove-image remove-image-desktop hidden" title="Remove image"></i>
                    <span
                      class="drag-info-box icon-move hidden">{{ Lang::get('frontend.get_involved.uploader.drag') }}</span>
                    <div class="banners hidden"></div>
                    <div class="mobile-overlay hidden enabled">
                      <img src="{{ Config::get('path.frontend.img') }}/two-fingers-swipe.svg" alt="Swipe icon">
                      <div class="">{{ Lang::get('frontend.get_involved.uploader.move') }}</div>
                    </div>
                    <div class="email-required-message-overlay">
                      <div class="email-message">{{ Lang::get('frontend.get_involved.uploader.email') }}</div>
                    </div>
                  </div>
                  <div class="dropzone-tools hidden">
                    <span
                      class="icon-trash js-remove-image">{{ Lang::get('frontend.get_involved.uploader.change') }}</span>
                    <span class="icon-help-circled js-show-mobile-overlay help-icon"></span>
                  </div>
                  <div class="zoom-controls hidden">
                    <div class="zoom-label">{{ Lang::get('frontend.get_involved.uploader.zoom') }}</div>
                    <input class="zoom-slider" type="range" min="0" max="100" value="0">
                    <div class="zoom-slider-runner-lower"></div>
                  </div>
                </div>
              </div>
            </div>
            <input type="submit" class="hidden">
          </form>
          <div class="error-message-container"></div>
          <div class="button-container">
            <button class="ami-button highlight next-step trackable" type="button" name="next-step"
                    data-ga-event="submitParticipation">
              {{ Lang::get('frontend.get_involved.uploader.cta_join') }}
            </button>
          </div>
        </div>
        <div class="right-content image-downloader hidden">
          <h3>{{ Lang::get('frontend.get_involved.thanks.title') }}</h3>
          <p class="page-description">{{ Lang::get('frontend.get_involved.thanks.subtitle') }}</p>
          <div class="columns">
            <div class="column is-half left-column">
              <div class="share">
                <div class="column-title">{{ Lang::get('frontend.get_involved.thanks.share.title') }}</div>
                <div class="column-description">{{ Lang::get('frontend.get_involved.thanks.share.subtitle') }}</div>
                <div class="share-buttons columns is-multiline">
                  <div class="column is-half-mobile is-12-desktop is-half-widescreen">
                    <button class="ami-button js-sharer trackable track-on-click facebook" data-ga-event="shareFacebook" type="button" name="button" data-sharer-type="facebook">
                      <i class="icon-facebook-official"></i>
                      <span>{{ Lang::get('frontend.get_involved.thanks.share.facebook') }}</span>
                      <span class="checkmark icon-ok"></span>
                    </button>
                    <a href="mailto:?subject=tmp&amp;body=tmp" class="ami-button js-sharer trackable track-on-click mail" data-ga-event="shareEmail" data-sharer-type="email">
                      <i class="icon-mail-alt"></i>
                      <span>{{ Lang::get('frontend.get_involved.thanks.share.email') }}</span>
                      <span class="checkmark icon-ok"></span>
                    </a>
                  </div>
                  <div class="column is-half-mobile is-12-desktop is-half-widescreen">
                    <button class="ami-button js-sharer trackable track-on-click twitter" data-ga-event="shareTwitter" type="button" name="button" data-sharer-type="twitter">
                      <i class="icon-twitter"></i>
                      <span>{{ Lang::get('frontend.get_involved.thanks.share.twitter') }}</span>
                      <span class="checkmark icon-ok"></span>
                    </button>
                    <button class="ami-button js-sharer trackable track-on-click pinterest" data-ga-event="sharePinterest" type="button" name="button" data-sharer-type="pinterest">
                      <i class="icon-pinterest-circled"></i>
                      <span>{{ Lang::get('frontend.get_involved.thanks.share.pinterest') }}</span>
                      <span class="checkmark icon-ok"></span>
                    </button>
                  </div>
                  <div class="column is-12 ami-toolbar">
                    <div class="copy-link ami-button">
                      <input type="text" id="copy-link-content" class="copy-link-content" value="" readonly>
                    </div>
                    <div class="copy-link-button ami-button trackable track-on-click js-sharer" data-sharer-type="copy" data-ga-event="shareLink" data-alt-text="Copied!">
                      <i class="icon-link"></i>
                      {{ Lang::get('frontend.get_involved.thanks.share.copy') }}
                      <div class="checkmark icon-ok"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="donate">
                <div class="column-title">{{ Lang::get('frontend.get_involved.thanks.donate.title') }}</div>
                <div class="column-description">{{ Lang::get('frontend.get_involved.thanks.donate.subtitle') }}</div>
                <a class="ami-link column-link trackable track-on-click" href="{{ Lang::get('frontend.get_involved.thanks.donate.url') }}" target="_blank" rel="noopener" data-ga-event="clickDonationButton">{{ Lang::get('frontend.get_involved.thanks.donate.cta') }}</a>
              </div>
            </div>
            <div class="column is-5 right-column">
              <div class="column-title">{{ Lang::get('frontend.get_involved.thanks.download.title') }}</div>
              <div class="column-description">{{ Lang::get('frontend.get_involved.thanks.download.subtitle') }}</div>
              <a class="ami-link column-link trackable track-on-click download-image" href="" download target="_blank" rel="noopener"
                 data-ga-event="downloadImage">
                {{ Lang::get('frontend.get_involved.thanks.download.cta') }}
              </a>
            </div>
          </div>
          <div class="button-container">
            <a class="ami-button highlight trackable track-on-click js-see-your-image" href="" data-ga-event="clickGalleryButton" target="_blank" rel="noopener">
              {{ Lang::get('frontend.get_involved.thanks.gallery_button') }}
            </a>
          </div>
        </div>
      </div>
    </div>

    <div class="hidden">
      <img id="banners" src="{{ Config::get('path.frontend.img') }}/banners.svg" alt="Banners">
      <canvas id="canvas"></canvas>
    </div>
    <div class="loader-container">
      <div class="loader"></div>
    </div>
  </div>
@stop
@section('scripts')
  <script type="text/javascript">
    function validateRecaptcha(response) {
      localStorage.setItem('recaptchaResponse', response);
    }
  </script>
@stop