<div class="blackLayer"></div>
<div class="content_and_background beforeAfterPage">
  <div class="close_button text_hidden_only" tabindex="4" title="<%= t('.close_title') %>">
    <div class="label">
      <%= t('.close') %>
    </div>
  </div>

  <div class="backgroundArea">
    <div class="videoWrapper">
      <div class="before_after_container">
        <div class="before_after">
          <div class="before_wrapper">
            <%= background_image_div_with_size(configuration, 'before_image', :class => 'before_image', :spanning => true) %>
          </div>
          <div class="after_wrapper">
            <%= background_image_div_with_size(configuration, 'after_image', :class => 'after_image', :spanning => true) %>
          </div>
        </div>
      </div>
    </div>
    <%= shadow_div :opacity => configuration['gradient_opacity'] %>
  </div>

  <div class="content">
    <div class="controls">
      <span class="hint"><%= t('.hint') %></span>
      <%= info_box(configuration) %>
      <div class="vjs-control-bar view-control">
        <div class="play_button vjs-controls vjs-default-skin vjs-player">
          <a class="vjs-play-control vjs-play vjs-control" tabindex="4" title="<%= t('.start_title') %>"><span></span></a>
        </div>
        <div class="control_bar_text">
          <%= configuration['control_bar_text'].presence || t('.start') %>
        </div>
      </div>
    </div>

    <div class="scroller">
      <div>
        <div class="contentWrapper">
          <div class="page_header">
            <h2>
              <span class="tagline"><%= configuration['tagline'] %></span>
              <span class="title"><%= configuration['title'] %></span>
              <span class="subtitle"><%= configuration['subtitle'] %></span>
            </h2>
            <%= background_image_tag(configuration['background_image_id'], {:class => "print_image"}) %>
          </div>
          <div class="contentText">
            <p><%= raw configuration['text'] %></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>