#teaser.grid-container
 .grid-x
  .large-4.medium-4.small-3.cell
    #biglogo
      // TODO: vary the logo depending on the virtual host
      img src="/images/logos/debian.svg" width="300" alt="Debian logo"
  .large-8.medium-8.small-9.cell
    h1 We have screenshots!
    p
      ' Have you ever wondered how a certain piece of software looks
      ' and works before spending time installing it?
    p
      ' This website lets you browse screenshots of
      => number_with_delimiter(@package_count)
      ' software packages coming with
      ' Debian and other Linux distributions. And of course you are encouraged to upload
      ' your own screenshots for others to explore.

    p
      = form_tag(packages_grid_path, method: 'GET')
        .input-group
          input.input-group-field type="search" name="search" placeholder="Looking for a special software?" autofocus="true"
          .input-group-button
              input.button.postfix type="submit" value="Search"

- if @newest_upload
  .grid-container
  .grid-x.align-spaced
    .large-3.medium-12.small-12.cell.text-center
      h2 Newest upload
      .thumb-height
        a href=package_path(@newest_upload.package.name)
          = image_tag(@newest_upload.image.variant(resize_to_limit: [160,120]), alt: @newest_upload.caption)
      p
        strong
          =@newest_upload.package.name
          ' :
        =@newest_upload.package.description
    .large-3.medium-12.small-12.cell.text-center
      h2 Most popular
      .thumb-height
        - if @most_popular_package
          a href=package_path(@most_popular_package.name)
            = image_tag(@most_popular_package.screenshots.first.image.variant(resize_to_limit: [160,120]))
        - else
          'No uploaded screenshots yet.
      p
        strong
          =@most_popular_package.name
          ' :
        =@most_popular_package.description
    .large-3.medium-12.small-12.cell.text-center
      h2 Contribute
      .thumb-height
        - if @most_wanted_package.name
          a href=upload_path(@most_wanted_package.name)
            img src="/images/dummy/no-screenshots-upload-one.svg" width="160"
        - else
          'No uploaded screenshots yet.
      p
        / TODO: Randomly choose one of ~30 packages
        ' We lack a screenshot for the
        strong =>@most_wanted_package.name
        ' package. Can you
        a href=package_path(@most_wanted_package.name) provide one
        ' ?