{% load static %}
{% load i18n %}
{% load mastodon %}
{% load duration %}
{% load thumb %}
<!DOCTYPE html>
<html lang="zh" class="classic-page">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ site_name }} - {% trans "Preferences" %}</title>
    {% include "common_libs.html" %}
    <script src="{{ cdn_url }}/npm/js-cookie@3.0.5/dist/js.cookie.min.js"></script>
  </head>
  <body>
    {% include "_header.html" %}
    <main>
      <div class="grid__main">
        <article>
          <details open>
            <summary>
              <b>{% trans "Preferences" %}</b>
            </summary>
            <form action="{% url 'users:preferences' %}" method="post">
              {% csrf_token %}
              <fieldset>
                {% trans 'Default view once logged in' %}
                <input type="radio"
                       name="classic_homepage"
                       value="0"
                       id="classic_homepage0"
                       {% if request.user.preference.classic_homepage == 0 %}checked{% endif %}>
                <label for="classic_homepage0">{% trans "Discover" %}</label>
                <input type="radio"
                       name="classic_homepage"
                       value="2"
                       id="classic_homepage2"
                       {% if request.user.preference.classic_homepage == 2 %}checked{% endif %}>
                <label for="classic_homepage2">{% trans "Activities" %}</label>
                <input type="radio"
                       name="classic_homepage"
                       value="1"
                       id="classic_homepage1"
                       {% if request.user.preference.classic_homepage == 1 %}checked{% endif %}>
                <label for="classic_homepage1">{% trans "Home" %}</label>
              </fieldset>
              <fieldset>
                {% trans 'Default visibility' %}
                <input type="radio"
                       name="default_visibility"
                       value="0"
                       required=""
                       id="id_visibility_0"
                       {% if request.user.preference.default_visibility == 0 %}checked{% endif %}>
                <label for="id_visibility_0">{% trans "Public" %}</label>
                <input type="radio"
                       name="default_visibility"
                       value="1"
                       required=""
                       id="id_visibility_1"
                       {% if request.user.preference.default_visibility == 1 %}checked{% endif %}>
                <label for="id_visibility_1">{% trans "Followers Only" %}</label>
                <input type="radio"
                       name="default_visibility"
                       value="2"
                       required=""
                       id="id_visibility_2"
                       {% if request.user.preference.default_visibility == 2 %}checked{% endif %}>
                <label for="id_visibility_2">{% trans "Mentioned Only" %}</label>
              </fieldset>
              <fieldset>
                {% trans "Public status will be posted to fediverse" %}
                <input type="radio"
                       id="post_public_mode_0"
                       name="post_public_mode"
                       value="0"
                       {% if request.user.preference.post_public_mode == 0 %}checked{% endif %} />
                <label for="post_public_mode_0">{% trans "in public timeline" %}</label>
                <input type="radio"
                       id="post_public_mode_1"
                       name="post_public_mode"
                       value="1"
                       {% if request.user.preference.post_public_mode == 1 %}checked{% endif %} />
                <label for="post_public_mode_1">{% trans "unlisted and excluded from public timeline" %}</label>
                {% if enable_local_only %}
                  <input type="radio"
                         id="post_public_mode_4"
                         name="post_public_mode"
                         value="4"
                         {% if request.user.preference.post_public_mode == 4 %}checked{% endif %} />
                  <label for="post_public_mode_4">{% trans "local, this site only" %}</label>
                {% endif %}
              </fieldset>
              {% if request.user.mastodon %}
                <fieldset>
                  <label>
                    {% trans "Turn on crosspost to timeline by default" %}
                    <input type="checkbox"
                           name="mastodon_default_repost"
                           value="1"
                           {% if request.user.preference.mastodon_default_repost %}checked{% endif %}>
                  </label>
                </fieldset>
                <fieldset>
                  {% trans "Method for crossposting to timeline" %}
                  <input type="radio"
                         name="mastodon_repost_mode"
                         value="0"
                         required=""
                         id="mastodon_repost_mode_0"
                         {% if request.user.preference.mastodon_repost_mode == 0 %}checked{% endif %}>
                  <label for="mastodon_repost_mode_0">{% trans "Boost if possible" %}</label>
                  <input type="radio"
                         name="mastodon_repost_mode"
                         value="1"
                         required=""
                         id="mastodon_repost_mode_1"
                         {% if request.user.preference.mastodon_repost_mode == 1 %}checked{% endif %}>
                  <label for="mastodon_repost_mode_1">{% trans "Create a new post" %}</label>
                  <em data-tooltip="{% trans "this method is less optimal, may generate duplicated posts and miss reactions." %}"><i class="fa fa-question-circle"></i></em>
                </fieldset>
              {% endif %}
              <fieldset>
                <label for="mastodon_append_tag">{% trans 'Append tags when posting to timeline' %}</label>
                <input name="mastodon_append_tag"
                       id="mastodon_append_tag"
                       placeholder="{% trans "e.g. #bookstodon" %}"
                       value="{{ request.user.preference.mastodon_append_tag }}">
              </fieldset>
              <fieldset>
                {% all_languages as languages %}
                <label>{% trans 'Language' %}</label>
                <select name="language">
                  {% for lang in languages %}
                    <option value="{{ lang.0 }}"
                            {% if lang.0 == request.user.language %}selected{% endif %}>{{ lang.1 }}</option>
                  {% endfor %}
                </select>
              </fieldset>
              <fieldset>
                <label>{% trans 'Automatic bookmark for these categories' %}</label>
                <select name="auto_bookmark_cats" size="3" multiple>
                  {% all_categories as categories %}
                  {% for c in categories %}
                    {% if c.value != 'collection' %}
                      <option value="{{ c.value }}"
                              {% if c in request.user.preference.auto_bookmark_cats %}selected{% endif %}>
                        {{ c.label }}
                      </option>
                    {% endif %}
                  {% endfor %}
                </select>
                <small>
                  {% blocktrans %}When start to read/watch/play/... an item in these categories, a bookmark will be created automatically. Bookmarks can be viewed and managed in most <a href="https://joinmastodon.org/apps" target="_blank">Mastodon compatible apps</a>; your replies to these posts will automatically become notes for the item.{% endblocktrans %}
                </small>
              </fieldset>
              <fieldset>
                <label>{% trans 'Hide these categories in search results' %}</label>
                <select name="hidden_categories" size="3" multiple>
                  {% all_categories as categories %}
                  {% for c in categories %}
                    {% if c.value != 'collection' %}
                      <option value="{{ c.value }}"
                              {% if c in request.user.preference.hidden_categories %}selected{% endif %}>
                        {{ c.label }}
                      </option>
                    {% endif %}
                  {% endfor %}
                </select>
              </fieldset>
              <fieldset>
                <label>
                  <input type="checkbox"
                         name="anonymous_viewable"
                         {% if request.user.identity.anonymous_viewable %}checked{% endif %}>
                  {% trans 'Profile visible to anonymous web visitors and search engines' %}
                  <em data-tooltip="{% trans "this option limits web visits only; to limit fediverse visibility, choose followers only or mentioned only when posting" %}"><i class="fa fa-question-circle"></i></em>
                </label>
              </fieldset>
              <fieldset>
                <label>
                  <input type="checkbox"
                         name="show_last_edit"
                         {% if request.user.preference.show_last_edit %}checked{% endif %}>
                  {% trans 'Show your name on item page if you recently edited it' %}
                </label>
              </fieldset>
              <input type="submit" value="{% trans 'Save' %}">
            </form>
          </details>
        </article>
        <article>
          <details>
            <summary>{% trans 'Settings for current device' %}</summary>
            <form onsubmit="return false;">
              <h6>{% trans "theme" %}</h6>
              <p>
                <input type="radio" name="theme_color" id="theme_auto" value="">
                <label for="theme_auto">{% trans "system" %}</label>
                <input type="radio" name="theme_color" id="theme_light" value="light">
                <label for="theme_light">{% trans "light" %}</label>
                <input type="radio" name="theme_color" id="theme_dark" value="dark">
                <label for="theme_dark">{% trans "dark" %}</label>
              </p>
              <h6>{% trans "Focus mode" %}</h6>
              <p>
                <input type="checkbox" id="solo_mode">
                <label for="solo_mode">{% trans "hide reviews and ratings from other users" %}</label>
              </p>
              <h6>{% trans "Number of items per page" %}</h6>
              <p>
                <input type="radio" name="per_page" id="20_per_page" value="20">
                <label for="20_per_page">20</label>
                <input type="radio" name="per_page" id="40_per_page" value="40">
                <label for="40_per_page">40</label>
                <input type="radio" name="per_page" id="80_per_page" value="80">
                <label for="80_per_page">80</label>
              </p>
              <h6>{% trans "Custom styles" %}</h6>
              <textarea id="user_style"></textarea>
              <br>
              <input type="button" onclick="save_local();" value="{% trans "Save" %}">
            </form>
          </details>
          <script>
            var _c=$('html').attr('data-theme')||"";
            if (_c=="light") $('input[id=theme_light]').prop('checked', true);
            if (_c=="dark") $('input[id=theme_dark]').prop('checked', true);
            if (!_c) $('input[id=theme_auto]').prop('checked', true);
            $("#user_style").val(localStorage.getItem("user_style")||"");
            $("#solo_mode").prop("checked", localStorage.getItem("solo_mode")=="1");
            var _p=Cookies.get('per_page') || 20;
            $('#'+_p+'_per_page').prop('checked', true);
            function save_local() {
              var _c=$('input[name=theme_color]:checked').val();
              $('html').attr('data-theme', _c||"");
              localStorage.setItem("theme_color", _c);
              localStorage.setItem("user_style", $("#user_style").val());
              localStorage.setItem("solo_mode", $("#solo_mode").prop("checked")?"1":"0");
              Cookies.set('per_page', $('input[name=per_page]:checked').val(), {expires: 120, sameSite: 'Lax'});
              alert("{% trans 'Settings for current device saved' %}");
            }
          </script>
        </article>
        <article>
          <details>
            <summary>{% trans 'Additional Settings' %}</summary>
            <p>
              <a href="/@{{ request.user.identity.handle }}/settings/tokens/">{% trans "View authorized applications" %}</a>
            </p>
            <p>
              {% if user.email_account %}
                <a href="/@{{ request.user.identity.handle }}/settings/migrate_in/">{% trans "Migrate account" %}</a>
              {% else %}
                <a href="{% url 'users:info' %}">{% trans "Link an email so that you can migrate followers from other Fediverse instances." %}</a>
              {% endif %}
            </p>
          </details>
        </article>
      </div>
      {% include "_sidebar.html" with show_profile=1 identity=request.user.identity %}
    </main>
    {% include "_footer.html" %}
  </body>
</html>
