<!DOCTYPE html>
<html>
    <head>
        <title>deliver - <%= @app_name %></title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <style>
          .app-name {
              font-size: 42px;
              font-family: 'Helvetica Neue', HelveticaNeue, Helvetica Neue;
              font-weight: 300;
              margin-top: 22px;
              margin-left: 25px;
              margin-right: 25px;
          }

          .app-subtitle {
              font-size: 26px;
              font-family: 'Helvetica Neue', HelveticaNeue, Helvetica Neue;
              font-weight: 300;
              margin-left: 25px;
              margin-right: 25px;
          }

          .app-urls {
              margin-left: 25px;
              font-size: 14px;
              margin-top: 4px;
              margin-right: 25px;
          }

          body {
              font-family: 'Helvetica Neue', HelveticaNeue;
          }

          hr {
            margin-top: 40px;
            margin-bottom: 40px;
          }

          .app-url-descr {
              height:22px;
              display: inline-block;
              font-weight: 500;
          }

          .app-url {
              color: #0056ba;
              font-weight: 300;
              margin-right: 10px;
          }

          .app-keyword {
              margin-left: 25px;
              margin-right: 25px;
              margin-top: 22px;
          }

          .cat-headline {
              font-weight: 700;
              margin-bottom: 5px;
          }



          .app-description {
              margin-left: 25px;
              margin-right: 25px;
              margin-top: 22px;
          }

          .app-description-text {
              font-weight: 300;
          }

          .app-changelog {
              margin-left: 25px;
              margin-right: 25px;
              margin-top: 22px;
              font-weight: 300;
          }

          .app-screenshots {
              margin-left: 15px;
              margin-right: 15px;
              margin-top: 22px;
          }

          .app-keyword-list {
              font-weight: 300;
          }

          .app-changelog-list {
              list-style-type: square;
              
              font-weight: 300;
          }

          ul {
              margin-top: 6px;
          }

          .app-screenshot-row {
              width: 100%;
              margin-top: 10px;
              margin-bottom: 10px;
          }

          .app-screenshot {
              width: calc(20% - 30px);
              margin-left: 10px;
              margin-right: 10px;
          }

          #app-screenshots .cat-headline {
              margin-left: 10px;
              margin-right: 10px;
          }
          .app-icons {
            overflow: hidden;
          }
          .app-icons img {
            width: 150px;
          }
          .app-icons .app-icon {
              float: left;
              margin-right: 20px;
          }

          .app-minor-information {
            margin-left: 15px;
            margin-right: 15px;
            margin-top: 22px;
          }

          .app-minor-information-key {
            font-weight: 700;
          }
        </style>
    </head>
    
    <body>
      <div class="app-icons">
        
        <% if @options[:app_icon] %>
        <div class="app-icon">
          Large App Icon:<br>
          <img src="<%= render_relative_path(@export_path, @options[:app_icon]) %>">
        </div>
        <% end %>
        <% if @options[:apple_watch_app_icon] %>
        <div class="watch-icon">
          Watch App Icon:<br>
          <img src="<%= render_relative_path(@export_path, @options[:apple_watch_app_icon]) %>">
        </div>
        <% end %>
      </div>
      <% @languages.each do |language| %>
        <% if @options[:name] %>
          <div class="app-name">
            <%= language %>: <%= @options[:name][language] %>
          </div>
        <% else %>
          <div class="app-name">
            <%= language %>
          </div>
        <% end %>

        <% if @options[:subtitle] %>
          <div class="app-subtitle">
            Subtitle:  <%= @options[:subtitle][language] %>
          </div>
        <% end %>

        <div class="app-urls">
          <% all_keys = [:support_url, :marketing_url] %>
          <% all_keys.each do |key| %>
            <% value = @options[key][language] if @options[key] %>
            <% if value %>
              <div class="app-url-descr">
                <%= key %>: <a target="_blank" class="app-url" href="<%= value %>"><%= value %></a>
              </div>
            <% end %>
          <% end %>
        </div>
        
        <% if @options[:keywords] and @options[:keywords][language] %>
          <div class="app-keyword">
              <div class="cat-headline">Keywords</div>
              <ul class="app-keyword-list">
                <% split_keywords(@options[:keywords][language]).each do |keyword| %>
                  <li><%= keyword %></li>
                <% end %>
              </ul>
          </div>
        <% end %>
        
        <% if @options[:description] %>
          <div class="app-description">
               <div class="cat-headline">Description</div>
               <div class="app-description-text">
                  <%= (@options[:description][language] || '').gsub("\n", "<br />") %>
               </div>
          </div>
        <% end %>
        
        <% if @options[:release_notes] %>
          <div class="app-changelog">
              <div class="cat-headline">Changelog</div>
              <%= (@options[:release_notes][language] || '').gsub("\n", "<br />") %>
          </div>
        <% end %>

        <% if @options[:promotional_text] %>
          <div class="app-changelog">
              <div class="cat-headline">Promotional Text</div>
              <%= (@options[:promotional_text][language] || '').gsub("\n", "<br />") %>
          </div>
        <% end %>
        
        <div class="app-screenshots">
          <div class="cat-headline">Screenshots</div>

          <% if options[:skip_screenshots] %>
              <h2 style="color: blue">Skipped Screenshots</h2>
              <p>
                Options to skip_screenshots activated. <i>deliver</i> will not modify your app screenshots.
              </p>
            </div>
          <% elsif @screenshots.count > 0 %>
            <% sc = @screenshots.find_all { |s| s.language == language } %>
            <% sc_by_size = sc.group_by { |i| i.screen_size } %>

            <% sc_by_size.keys.sort.each do |screen_size| %>
              <% screenshots = sc_by_size[screen_size].sort { |a, b| [a.path] <=> [b.path] } %>
              <%# we are guaranteed to have at least one element because of the group_by %>
              <h4><%= screenshots[0].formatted_name %></h4>
              <div class="app-screenshot-row">

              <% screenshots.each_with_index do |screenshot, index| %>
                <a href="<%= URI.escape(screenshot.path) %>" target="_blank"><img class="app-screenshot" src="<%= render_relative_path(@export_path, URI.escape(screenshot.path)) %>" title="Screenshot #<%=index%> for <%=language%>"></a>
              <% end %>
              </div>
            <% end %>
          <% else %>
            <!-- no screenshots -->
            <div style="border: 3px solid red; padding: 0px 20px">
              <h2 style="color: red">No Screenshots Found</h2>
              <p>
                deliver couldn't find any screenshots.
                <% if options[:overwrite_screenshots] %>
                  <b>--overwrite_screenshots</b> is set, existing screenshots will be removed, but none will be uploaded.
                <% else %>
                  The existing screenshots on App Store Connect will be kept. 
                  if you want to remove them you have to use the <i>--overwrite_screenshots</i> flag.
                <% end %>
              <p>
                If you want to download your existing screenshots, run <i>deliver download_screenshots</i>.
              </p>
            </div>
          <% end %>
          </div>
        
        <hr />
      <% end # end data
      %>
      <% if @options[:trade_representative_contact_information] %>
        <div class="app-minor-information">
          <div class="cat-headline">Trade Representative Contact Information</div>
          <dl class="app-minor-information">
            <% @options[:trade_representative_contact_information].each do |key, value| %>
                <dt class="app-minor-information-key">
                  <%= key.to_s.capitalize.gsub("_", " ") %>
                </dt>
                <dd class="app-minor-information-text">
                  <%= (value || '').gsub("\n", "<br />") %>
                </dd>
            <% end %>
          </dl>
        </div>
        <hr />
      <% end %>

      <% if @options[:app_review_information] %>
        <div class="app-minor-information">
          <div class="cat-headline">Review Information</div>
          <dl class="app-minor-information">
            <% @options[:app_review_information].each do |key, value| %>
                <dt class="app-minor-information-key">
                  <%= key.to_s.capitalize.gsub("_", " ") %>
                </dt>
                <dd class="app-minor-information-text">
                  <%= (value || '').gsub("\n", "<br />") %>
                </dd>
            <% end %>
          </dl>
        </div>
      <% end %>
    </body>
</html>
