@use super::{layout_html, return_home_html, statics::images_css};
@use crate::{Image, FileType};

@(image: Image, sizes: &[u64])

@:layout_html("Thumbnails", Some(&format!("Thumbnails for {}", image.filename())), {
@if image.is_video() {
<meta property="og:video" content="@image.link()" />
<meta property="og:video:width" content="@image.width()" />
<meta property="og:video:height" content="@image.height()" />
<meta property="og:type" content="video" />
<meta property="twitter:card" content="player" />
<meta property="twitter:player" content="@image.link()" />
<meta property="twitter:player:width" content="@image.width()" />
<meta property="twitter:player:height" content="@image.height()" />
@if let Some(size) = sizes.last() {
<meta property="og:image" content="@image.thumb(*size, FileType::Jpg)" />
<meta property="og:image:secure_url" content="@image.thumb(*size, FileType::Jpg)" />
<meta property="og:image:alt" content="Image: @image.filename()" />
<meta property="og:image:type" content="image/jpg" />
<meta property="twitter:image" content="@image.thumb(*size, FileType::Jpg)" />
<meta property="twitter:image:alt" content="Image: @image.filename()" />
}
} else {
<meta property="og:image" content="@image.link()" />
<meta property="og:image:alt" content="Image: @image.filename()" />
<meta property="og:image:secure_url" content="@image.link()" />
<meta property="og:image:type" content="@image.mime()" />
<meta property="og:image:width" content="@image.width()" />
<meta property="og:image:height" content="@image.height()" />
<meta property="og:type" content="website" />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:image" content="@image.link()" />
<meta property="twitter:image:alt" content="Image: @image.filename()" />
}
<meta property="og:url" content="@image.link()" />
<meta property="twitter:url" content="@image.link()" />
<link rel="stylesheet" href="@crate::statics(images_css.name)" type="text/css" />
}, {
<section>
  <article>
    <h3>Here are your thumbnails</h3>
  </article>
  <ul>
    <li>
      <article>
        <p>Original File:<br /><a href="@image.view(None)">@image.view(None)</a></p>
      </article>
    </li>
    @for size in sizes {
    <li>
      <article>
        <picture>
          <source type="image/webp" srcset="@image.thumb(*size, FileType::Webp)" />
          <source type="image/avif" srcset="@image.thumb(*size, FileType::Avif)" />
          <img src="@image.thumb(*size, FileType::Jpg)" alt="@image.filename()" title="@image.filename()" />
        </picture>
        <p>@size x @size</p>
        <p>
          <a href="@image.view(Some(*size))" target="_blank" rel="noopener noreferrer">
            @image.view(Some(*size))
          </a>
        </p>
      </article>
    </li>
    }
  </ul>
  @:return_home_html()
</section>
})