extends includes/layout.pug

mixin fieldset(name)
  fieldset
    legend= name
    .fieldset-contents
      block

mixin input({id, label, description, type, placeholder, disabled, list})
  - disabled = disabled || false
  .field-row
    label.field-row__label(for=id)= label
    input(type=(type) id=id name=id value=settings[id] placeholder=placeholder disabled=disabled list=`${id}-list`).border-look.field-row__input
    if list
      datalist(id=`${id}-list`)
        each item in list
          option(value=item)
    if description
      .field-row__description!= description

mixin select({id, label, description, disabled, options})
  - disabled = disabled || false
  .field-row
    label.field-row__label(for=id)!= label
    select(id=id name=id disabled=disabled).border-look.field-row__input
      each option in options
        option(value=option.value selected=(option.value == (settings != undefined ? settings[id] : constants.user_settings[id].default)))= option.text
    if description
      .field-row__description!= description

block head
  title Settings - EirTube

block content
  main.settings-page
    form(method="post" action="/settings")
      +fieldset("Settings")

        +select({
          id: "theme",
          label: "Theme",
          options: [
            {value: 0, text: "Standard dark"},
            {value: 1, text: "Standard light"},
            {value: 2, text: "Edgeless light"},
            {value: 3, text: "Eir"}
          ]
        })

        +input({
          id: "instance",
          label: "Instance",
          description: 'CloudTube will fetch information from this <a href="https://invidious.io/">Invidious</a> or <a href="https://git.sr.ht/~cadence/NewLeaf">NewLeaf</a> instance.',
          type: "url",
          placeholder: constants.user_settings.instance.default,
          list: instances
        })

        +select({
          id: "local",
          label: "Play videos on",
          description: 'If EirTube, the instance above will be used.\nIf YouTube, you will be redirected there.\nIf local, CloudTube will try to connect to a NewLeaf/Invidious instance running on your own computer. This can bypass blocks, but requires you to run the instance software.\nIf you wish to use local mode, <a href="https://git.sr.ht/~cadence/tube-docs/tree/main/item/docs/newleaf/Installing%20NewLeaf.md">read how to install NewLeaf.</a>',
          options: [
            {value: "0", text: "EirTube"},
            {value: "2", text: "YouTube"},
            {value: "1", text: "Local"},
          ]
        })

        +select({
          id: "autoHD",
          label: "Auto download preferred quality",
          description: `Starts downloading the preferred quality chosen above after loading the default stream (if video is shorter than ${converters.lengthSecondsToLengthText(constants.server_setup.video_hq_preload_max_time)}).\nChoose a quality in \"Preferred auto quality\" below.`,
          options: [
            {value: "0", text: "Don't auto download"},
            {value: "1", text: "Preload preferred quality"}
          ]
        })

        +select({
          id: "quality",
          label: "Preferred auto quality",
          description: "Quality to auto download when \"Auto download HQ\" is enabled.\nBigger files means longer load times and more stress on the server, so be careful!",
          options: [
            {value: "0", text: "480p"},
            {value: "1", text: "720p"},
            {value: "2", text: "1080p"},
          ]
        })

        +select({
          id: "save_history",
          label: "Watched videos history",
          description: "Watched videos will appear in a dimmer colour.\nTurning this off will delete your existing watch history.",
          options: [
            {value: "0", text: "Don't store"},
            {value: "1", text: "Store on server"}
          ]
        })

        +select({
          id: "recommended_mode",
          label: "Recommended videos",
          description: 'Videos are recommended by YouTube to make people waste time.\nYou can take back some control by moving them below, or hiding them entirely.\nFor precise filtering of specific content, <a href="/filters">open the filter editor.</a>',
          options: [
            {value: "0", text: "Sidebar"},
            {value: "1", text: "Below"},
            {value: "2", text: "Hidden"}
          ]
        })

        h2 #[img(src="/static/images/dearrow-logo.svg" height=20)] Dearrow settings
        p
          <a href="https://dearrow.ajay.app/">DeArrow</a> is a community-curated database of alternate thumbnails and titles for YouTube videos, meant to make YouTube less sensationalist.
        section.dearrow-section
          +select({
            id: "dearrow",
            label: "Mode",
            options: [
              {value: "0", text: "Disabled"},
              {value: "1", text: "Off by default"},
              {value: "2", text: "Use alternate video titles only"},
              {value: "3", text: "Use alternate video thumbnails only"},
              {value: "4", text: "Use alternate video titles and thumbnails"}
            ]
          })

          +input({
            id: "dearrow_thumbnail_instance",
            label: "Dearrow thumbnail instance",
            type: "url",
            placeholder: constants.user_settings.dearrow_thumbnail_instance.default
          })

          +select({
            id: "dearrow_preload",
            label: "Preload",
            description: `Controls whether DeArrow data is retrieved before or after a page loads.\nOnly enable if you're <b>dead set</b> on not using any Javascript at all.`,
            options: [
              {value: "0", text: "Disabled (fetch using JavaScript)"},
              {value: "1", text: "Enabled (fetch all before page load)"}
            ]
          })

        h2 #[img(src="/static/images/sponsorblock-logo.png" height=20)] Sponsorblock settings
        p
          <a href="https://sponsor.ajay.app/">SponsorBlock</a> is a community-curated database tracking intrusive sponsor segments in YouTube videos.
        p #[i JavaScript is required to make use of this feature.]
        section.sb-section
          +select({
            id: "sponsorblock",
            label: "Mode",
            options: [
              {value: "0", text: "Disabled"},
              {value: "1", text: "Enabled"}
            ]
          })

        +input({
          id: "sponsorblock_keybind",
          label: "Interaction keybind",
          description: "<a href='https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values'>JavaScript KeyboardEvent.key</a> value to listen for when showing a SponsorBlock prompt.",
          placeholder: constants.user_settings.sponsorblock_keybind.default
        })

        each category in ["sponsor", "selfpromo", "interaction", "intro", "outro", "preview", "music_offtopic", "filler"]
          +select({
            id: `sponsorblock_${category}`,
            label: `<code>${category}</code>`,
            options: [
              {value: "0", text: "Automatic"},
              {value: "1", text: "Skip"},
              {value: "2", text: "Prompt skip"},
              {value: "3", text: "Mute"},
              {value: "4", text: "Ignore"},
            ]
          })

      .save-settings
        button.border-look Save

    h2.more-settings-header More settings

    section.more-settings
      ul.more-settings__list
        li.more-settings__list-item: a(href="/filters") Edit filters

    if user.token
      details.data-management
        summary Sync data
        p Open this link elsewhere to import your current CloudTube session there.
        p.
          If you clear your cookies often, you can bookmark this link and open it
          to restore your data, or if you have multiple devices, you can send this
          link to them to import your session and automatically keep everything
          in sync.
        - let url = `/formapi/importsession/${user.token}`
        a(href=url)= url

      details.data-management.delete-details
        summary Delete data
        p Press this button to erase all your data from CloudTube.
        p.
          Just the current session will be removed. If you lost access to a
          previous session, you cannot touch it.
        p.
          You will lose your subscriptions, watch history, settings, and anything
          else you stored on the server. The server will keep no record that they
          ever existed.
        p Deletion is instant and #[em cannot be undone.]
        input(type="checkbox" id="delete-confirm")
        .delete-confirm-container
          label(for="delete-confirm").delete-confirm-label I understand the consequences
        form(method="post" action="/formapi/erase")
          input(type="hidden" name="token" value=user.token)
          button.border-look#delete-button Permanently erase my data
