extends ../layouts/main
block content

  include ../sticker/components/sticker

  mixin renderStickerList (stickers)
    div(uk-grid).uk-grid-small
      each sticker in stickers
        div(class="uk-width-1-1 uk-width-auto@s")
          a(href=`/sticker/${sticker._id}`).uk-display-block.uk-text-center
            +renderSticker(sticker)

  mixin renderStickerUploadForm (actionUrl, channel)
    form(method="POST", action= actionUrl, enctype="multipart/form-data").uk-form
      if channel
        input(id="channel-id", type="hidden", name="channel", value= channel._id)

      .uk-margin
        input(id="sticker-slug", name="slug", type="text", placeholder= "Enter sticker name").uk-input

      div(uk-grid).uk-grid-small
        .uk-width-auto
          .uk-form-custom
            input(id="sticker-file", name="stickerFile", type="file")
            button(type="button").uk-button.dtp-button-default
              span
                i.far.fa-image
              span.uk-margin-small-left Select File

        .uk-width-auto
          button(type="submit").uk-button.dtp-button-primary
            span
              i.fas.fa-plus
            span.uk-margin-small-left Add sticker

  section.uk-section.uk-section-default.uk-section-small
    .uk-container
      div(uk-grid)
        div(class="uk-width-1-1 uk-width-2-3@l")
          h2 #{user.displayName || user.username}'s stickers

          .uk-margin
            +renderStickerUploadForm('/sticker')

          .uk-margin
            if Array.isArray(userStickers) && (userStickers.length > 0)
              +renderStickerList(userStickers)
            else
              div #{user.displayName || user.username} has no stickers.

          if channel
            section.uk-section.uk-section-default.uk-section-small
              .uk-container
                h2 #{channel.name}'s stickers

                .uk-margin
                  +renderStickerUploadForm('/sticker', channel)

                .uk-margin
                  if Array.isArray(channelStickers) && (channelStickers.length > 0)
                    +renderStickerList(channelStickers)
                  else
                    div #{channel.name} has no stickers.

        div(class="uk-width-1-1 uk-width-1-3@l")
          h1 Stickers
          p Stickers accepts PNG, JPEG, GIF and MP4 files. Transparency/alpha is supported in the PNG format. Animations will be transcoded to MP4.
          p Stickers can be up to 2MB, and animated stickers are limited to 10 seconds in duration regardless of format. Resolutions from 100x100 to 320x100 are accepted. Larger Stickers will be scaled to cover an aspect-correct reduction, if possible. Some cropping may occur.
          p Stickers may not contain pornography. Animated stickers with audio will have the audio data removed as part of their conversion, all Stickers are silent loops.