<div class="container" data-hx-boost="false">
  <h1>Settings</h1>
  <p>
    PixivFE uses <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies">cookies</a> to store your
    preferences, which you can change on this page to customize your experience on this instance.
  </p>
  <details>
    <summary>
      <h2>Current cookie values</h2>
    </summary>
    <div>
    <h3>Cookie list</h3>
      Please note that some cookies here such as ShowArtR18,
      ShowArtR18G, and ShowArtAI are for features still under development.
    </div>
      {{ range CookieList }}
    <div class="settings-set-cookie">
      <h3>{{.Key}}</h3>
      <form action="/settings/set-cookie" method="post">
        <input type="hidden" name="key" value="{{.Key}}" />
        <input type="text" name="value" value="{{.Value}}" />
        <input type="submit" value="Set" />
      </form>

    </div>
    {{ end }}
    <div>

    <h3>Raw settings</h3>
    <p>
      You can save your current cookie values to quickly set your settings on other compatible instances,
      or if the current instance's cookies went expired.
    </p>
    <p>Invalid values will be ignored.</p>
    <form action="/settings/raw" method="post">
    <textarea name="raw" rows="10" cols="80">{{range CookieList}}
{{.Key}}={{.Value}}{{end}}
    </textarea>
    <input type="submit" value="Set raw settings" />
    </form>
    </div>
  </details>
  <form action="/settings/reset-all" method="post">
    <input class="critical" type="submit" value="Reset all cookies/preferences" />
  </form>
  <hr />
  <h2 id="login">Login</h2>
  <p>Supported features (for now):</p>
  <ul>
    <li>Discovery page</li>
    <li>Landing page</li>
    <li>Like/Bookmark</li>
  </ul>
  <p>
    Log in with your Pixiv account's cookie to access features above.
    To learn how to obtain your cookie, please see
    <a href="https://pixivfe.pages.dev/obtaining-pixivfe-token/">the guide on obtaining your PixivFE token</a>.
  </p>
  <p>
    Keep in mind that logins will expire whenever the server is updated, so you
    may need to log in again if the server has been restarted recently.
  </p>
  <form action="/settings/token" method="post">
    <input type="text" name="token" autocomplete="off" />
    <input type="submit" value="Remember account cookie (until next server restart)" />
  </form>
  <hr />
  <h2>Logout</h2>
  <p>
    To securely end your session, click the 'Logout!' button. This will
    immediately remove your session token.
  </p>
  <form action="/settings/logout" method="post">
    <input type="submit" value="Logout!" />
  </form>
  <hr />
  <h2>Image proxy server</h2>
  <p>
    Choose how images are loaded in PixivFE by selecting either the built-in
    proxy or one of the provided external proxy servers. If you prefer, you can
    also specify a custom proxy server by entering its URL and clicking 'Use
    Custom Proxy'.
  </p>
  <div class="form-field">
    <form action="/settings/imageServer" method="post">
      <label>
        <input type="radio" name="image-proxy" required="true" value="" />
        No (use built-in proxy)
      </label>
      {{ range ProxyList }}
      <label>
        <input type="radio" name="image-proxy" required="true" value="{{.}}" />
        {{.}}
      </label>
      {{ end }}
      <input type="submit" value="Use selected proxy" />
    </form>
    <br />
    <form action="/settings/imageServer" method="post">
      <label for="image-proxy">
        Custom image proxy server
        <input type="text" name="image-proxy" required="true" placeholder="https://example.com" autocomplete="off" />
      </label>
      <input type="submit" value="Use custom proxy" />
    </form>
  </div>
</div>
