<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <style type="text/css">
    .short-screenshot {
      max-width: 200px;
    }
    .panel li{
      word-wrap: break-word;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="row page-header">
      <h1>List of screenshots for <%= location %> <small>taken <%= Time.now.strftime('%Y/%m/%d %H:%M:%S') %></small></h1>
    </div>
    <div class="row">
      <div class="col-lg-2">
        <div class="panel">
          <div class="panel-heading">Screenshots:</div>
          <ul class="list-group list-group-flush">
            <% directories.keys.each do |dir| %>
            <li class="list-group-item"><a href="#<%=path%><%=dir%>"><%=dir.gsub('__', '/')%></a></li>
            <% end %>
          </ul>
        </div>
      </div>
      <div class="col-lg-10">
        <% directories.each do |dir, sizes| %>
        <% sizes.to_a.sort.each do |size, files| %>
        <div class="row">
          <a name="<%= dir %>"></a>
          <% if threshold.nil? %>
          <h2><%= dir.gsub('__', '/') %></h2>
          <% else %>
          <% if files[:data] > threshold %>
          <h2 style="color:#CC0101"><%= dir.gsub('__', '/') %> <span class="glyphicon glyphicon-remove"></span></h2>
          <% else %>
          <h2><%= dir.gsub('__', '/') %></h2>
          <% end %>
          <% end %>
        </div>
        <div class="row">
          <h3 class="col-lg-1 text-muted"><%=size%>px</h3>
          <% files[:variants].each do |file| %>
          <div class="col-lg-3">
            <a href="<%=file[:filename]%>">
              <img class="short-screenshot img-thumbnail" src="<%=path%><%=file[:thumb]%>">
            </a>
            <p class="text-center">
              <a href="<%=file[:url]%>" target="_blank"><%=file[:name]%></a>
            </p>
          </div>
          <% end %>
          <div class="col-lg-3">
            <% if files[:diff] %>
            <a href="<%=files[:diff][:filename]%>">
              <img class="short-screenshot img-thumbnail" src="<%=path%><%=files[:diff][:thumb]%>">
            </a>
            <% end %>
            <p class="text-center">diff</p>
            <% if threshold.nil? %>
            <p class="text-center text-muted"><%=files[:data]%> % different</p>
            <% else %>
            <% if files[:data] > threshold %>
            <p style="color:#CC0101" class="text-center text-muted"><%=files[:data]%> % different</p>
            <% else %>
            <p class="text-center text-muted"><%=files[:data]%> % different</p>
            <% end %>
            <% end %>
          </div>
        </div>
        <% end %>
        <% end %>
      </div>
    </div>
  </div>
</body>
</html>
