h1 Content Settings
= form_for @changeset, ~p"/settings", [method: "put"], fn f ->
  = if @changeset.action do
    .alert.alert-danger
      p Oops, something went wrong! Please check the errors below.

  #js-setting-table.block
    .block__header.block__header--js-tabbed
      = if @conn.assigns.current_user do
        = link "Watch List", to: "#", class: "selected", data: [click_tab: "watched"]
        = link "Display", to: "#", data: [click_tab: "display"]
        = link "Comments", to: "#", data: [click_tab: "comments"]
        = link "Notifications", to: "#", data: [click_tab: "notifications"]
        = link "Metadata", to: "#", data: [click_tab: "metadata"]
        = link "Local", to: "#", data: [click_tab: "local"]
      - else
        = link "Local", to: "#", class: "selected", data: [click_tab: "local"]
        = link "More settings", to: "#", data: [click_tab: "join-the-herd"]

    = if @conn.assigns.current_user do
      .block__tab data-tab="watched"
        h4 Tags
        .field
          = label f, :watched_tag_list, "Tags to watch"
          = render PhilomenaWeb.TagView, "_tag_editor.html", f: f, name: :watched_tag_list, type: :edit, conn: @conn
          = error_tag f, :watched_tag_list

        h4 Watchlist queries and filtering
        p
          ' The following two areas are for search queries to control what other images show up in your watch list. Lines are ORed together. See
          => link "the syntax guide", to: "/pages/search_syntax"
          ' for how to write queries.

        .field
          = label f, :watched_images_query_str, "Watch list search string (images found by this search are added to your watched images list)"
          = textarea f, :watched_images_query_str, class: "input input--wide", autocapitalize: "none"
          = error_tag f, :watched_images_query_str
        .field
          = label f, :watched_images_exclude_str, "Watch list filter string (any images found by this search are removed from your watched images list)"
          = textarea f, :watched_images_exclude_str, class: "input input--wide", autocapitalize: "none"
          = error_tag f, :watched_images_exclude_str
        .field
          => checkbox f, :no_spoilered_in_watched, class: "checkbox"
          => label f, :no_spoilered_in_watched, "Hide images spoilered by filter in watchlist"

        h4 Other
        p
          ' RSS feed link (for Newsblur, RSSOwl, Thunderbird, etc.):
          br
          #rss-feed-button>
            code>
              = link("Click to show", to: "#", data: [click_show: "#rss-link", click_hide: "#rss-feed-button"])
          #rss-link.hidden
            = url_input f, :subscribe_url, value: url(~p"/api/v1/rss/watched?#{[key: @conn.assigns.current_user.authentication_token]}"), class: "input input--wide"
          br
          ' Do not share this URL with anyone, it may allow an attacker to compromise your account.

      .block__tab.hidden.flex.flex--maybe-wrap data-tab="display"
        div
          .field
            => label f, :use_centered_layout
            => checkbox f, :use_centered_layout, class: "checkbox"
            .fieldlabel: i Align content to the center of the page - try this option out if you browse the site on a tablet or a fairly wide screen.
          .field
            => label f, :show_sidebar_and_watched_images
            => checkbox f, :show_sidebar_and_watched_images, class: "checkbox"
            .fieldlabel: i Show the sidebar and new watched images on the homepage (the default) or hide it.
          .field
            => label f, :hide_vote_counts
            => checkbox f, :hide_vote_counts, class: "checkbox"
            .fieldlabel: i Hide upvote and downvote counts on images, showing only the overall score
          .field
            => label f, :images_per_page
            => number_input f, :images_per_page, min: 1, max: 50, step: 1, class: "input"
            = error_tag f, :images_per_page
            .fieldlabel
              i
                ' This is the number of images per page that are displayed on image listings and searches, up to a maximum of 50.
                ' For 1080p monitors, try 24.
          .field
            label> Theme
            => select f, :theme_name, themes(), class: "input"
            = error_tag f, :theme_name
            .fieldlabel: i General appearance of the theme
          .field
            label> Theme color
            => select f, :theme_color, theme_colors(), class: "input"
            = error_tag f, :theme_color
            .fieldlabel: i Color of the theme
            .fieldlabel: strong Don't forget to save the settings to apply the theme!
          .hidden#js-theme-paths data-theme-paths=Jason.encode!(theme_paths())
          .field
            => label f, :scale_large_images
            => select f, :scale_large_images, scale_options(), class: "input"
            = error_tag f, :scale_large_images

      .block__tab.hidden.flex.flex--maybe-wrap data-tab="comments"
        div
          .field
            => label f, :comments_newest_first, "Newest comments first"
            => checkbox f, :comments_newest_first
            .fieldlabel: i Display the newest comments at the top of the page.
          .field
            => label f, :comments_always_jump_to_last, "Show latest comment page"
            => checkbox f, :comments_always_jump_to_last
            .fieldlabel
              i
                ' This setting takes effect when the previous is disabled. Always jump to the latest page (enabled) or show the first page if the oldest comments are shown at the top of the page.
                br
                ' Posting will always direct you to the latest page so that you can see your comment in context.
          .field
            => label f, :comments_per_page
            => number_input f, :comments_per_page, min: 1, max: 100, step: 1, class: "input"
            = error_tag f, :comments_per_page
            .fieldlabel: i This is the number of comments per page that are displayed on image pages.
          .field
            => label f, :messages_newest_first, "Newest messages first"
            => checkbox f, :messages_newest_first
            .fieldlabel: i Show the newest messages first (enabled) or show the oldest messages at the top of a conversation. Enabling this makes it feel more like a top-posted email quote chain.

      .block__tab.hidden.flex.flex--maybe-wrap data-tab="notifications"
        div
          .field
            => label f, :watch_on_reply, "Subscribe on Reply"
            => checkbox f, :watch_on_reply, class: "checkbox"
            .fieldlabel: i Subscribe on Reply means you'll be subscribed things (images or topics) automatically as soon as you post a comment or reply, keeping you in the conversation.
          .field
            => label f, :watch_on_upload, "Subscribe on Upload"
            => checkbox f, :watch_on_upload, class: "checkbox"
            .fieldlabel: i Subscribe on Upload means you'll be subscribed to images automatically as soon as you upload, to help you keep track of comments.
          .field
            => label f, :watch_on_new_topic, "Subscribe on New Threads"
            => checkbox f, :watch_on_new_topic, class: "checkbox"
            .fieldlabel: i Subscribe on New Threads means you'll be subscribed to threads automatically as soon as you post, to help you keep track of replies.

      .block__tab.hidden.flex.flex--maybe-wrap data-tab="metadata"
        div
          .field
            => label f, :fancy_tag_field_on_upload, "Fancy tags - uploads"
            => checkbox f, :fancy_tag_field_on_upload, class: "checkbox"
          .field
            => label f, :fancy_tag_field_on_edit, "Fancy tags - edits"
            => checkbox f, :fancy_tag_field_on_edit, class: "checkbox"
            .fieldlabel: i The fancy tag editor gives you autosuggestions and visual representations of the tags, but is sometimes not desired - for instance when dealing with batch uploads where you might want to copy-paste tags. You can choose which type of editor to use by default here.
          .field
            => label f, :anonymous_by_default
            => checkbox f, :anonymous_by_default, class: "checkbox"
            .fieldlabel: i Check this box to post images and comments as anonymous by default, even if logged in.

    .block__tab class=local_tab_class(@conn) data-tab="local"
      .block.block--fixed.block--warning Settings on this tab are saved in the current browser. They are independent of your login.
      .field
        => label f, :hidpi, "Serve HiDPI thumbnails"
        => checkbox f, :hidpi, checked: @conn.cookies["hidpi"] == "true"
        .fieldlabel: i Use high quality thumbnails on displays with a high pixel density. Requires more data than regular thumbnails.
      .field
        => label f, :serve_webm, "Serve WebM"
        => checkbox f, :serve_webm, checked: @conn.cookies["serve_webm"] == "true"
        .fieldlabel: i Serve WebM/MP4 versions of GIF images when available. Good for lower-bandwidth connections, but the video versions may have missing start/end frames, and do not support transparency.
      .field
        => label f, :webm, "Use video thumbnails"
        => checkbox f, :webm, checked: @conn.cookies["webm"] == "true"
        .fieldlabel: i Use video thumbnails for WebM videos. Does not apply to GIF images.
      .field
        => label f, :unmute_videos, "Enable video audio by default"
        => checkbox f, :unmute_videos, checked: @conn.cookies["unmute_videos"] == "true"
        .fieldlabel: i Automatically enable audio on video pages when they are loaded.
      .field
        => label f, :hide_uploader
        => checkbox f, :hide_uploader, checked: @conn.cookies["hide_uploader"] == "true"
        .fieldlabel: i Hide the uploader and date posted information on image pages.
      .field
        => label f, :unfilter_tag_suggestions
        => checkbox f, :unfilter_tag_suggestions, checked: @conn.cookies["unfilter_tag_suggestions"] == "true"
        .fieldlabel: i Don't attempt to filter tag suggestions using your current filter.
      .field
        => label f, :hide_score
        => checkbox f, :hide_score, checked: @conn.cookies["hide_score"] == "true"
        .fieldlabel: i Hide score information for images.
      .field
        => label f, :chan_nsfw, "Show NSFW channels"
        => checkbox f, :chan_nsfw, checked: @conn.cookies["chan_nsfw"] == "true"
        .fieldlabel: i Show streams marked as NSFW on the channels page.
      .field
        => label f, :enable_search_ac, "Enable search auto-completion"
        => checkbox f, :enable_search_ac, checked: @conn.cookies["enable_search_ac"] === "true"
        .fieldlabel: i Enable the auto-completion of tags in search fields.
      = if staff?(@conn.assigns.current_user) do
        .field
          => label f, :hide_staff_tools
          => checkbox f, :hide_staff_tools, checked: @conn.cookies["hide_staff_tools"] == "true"
          .fieldlabel: i Hide most of the staff tools (e.g. IPs, anon names) making your site appear as if you weren't staff, this is useful when browsing in public.

    = if !@conn.assigns.current_user do
      .block__tab.hidden data-tab="join-the-herd"
        p
          ' Consider
          => link "creating an account!", to: ~p"/registrations/new"
          br
          ' You will be able to customize the number of images and comments you get on a single page, as well as change the appearance of the site with custom themes.

  br
  = submit "Save My Settings", class: "button"
  br
