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

@(image: Image, size: Option<u64>, max_size: Option<&u64>)

    @:layout_html(&format!("Image: {}", image.filename()), Some("An image hosted on pict-rs"), {
    @if let Some(size) = size {
    <meta property="og:image" 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="og:url" content="@image.view(Some(size))" />
    <meta property="og:type" content="website" />
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:image" content="@image.thumb(size, FileType::Jpg)" />
    <meta property="twitter:image:alt" content="Image: @image.filename()" />
    <meta property="twitter:url" content="@image.thumb(size, FileType::Jpg)" />
    } else {
    @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) = max_size {
    <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>
        <div>
          @if let Some(size) = size {
          <picture>
            <source type="image/webp" srcset="@image.thumb(size, FileType::Webp)" />
            <img src="@image.thumb(size, FileType::Jpg)" alt="@image.filename()" title="@image.filename()" />
          </picture>
          <p><a href="@image.thumb(size, FileType::Jpg)">Direct Link</a></p>
          } else {
          @if image.is_video() {
          <video src="@image.link()" alt="@image.filename()" title="@image.filename()" type="@image.mime()" autoplay
            muted loop>
          </video>
          } else {
          <img src="@image.link()" alt="@image.filename()" title="@image.filename()" />
          }
          <p><a href="@image.link()">Direct Link</a></p>
          }
        </div>
      </article>
      @:return_home_html()
    </section>
    })