{% extends 'base.html' %} {% block scripts %}
<script>
  $(function () {
	$(".user-preference-input").change(function() {
		let val = $(this).val();
		let pref = $(this).attr("data-pref");
		let startVal = $(this).attr("data-start-value");
		let $this = $(this);

		if (val == startVal) return;

		let timeoutId = setTimeout(function() {
			$this.attr("data-start-value", val);

			if (pref == "bg_music_volume" || pref == "volume") {
				val = val / 100;
			}
			changePreferences(pref, val);
		}, 1000);

		// Se o usuário alterar o valor novamente antes do delay expirar, cancela o timeout
		$(this).one("change", function() {
			clearTimeout(timeoutId);
		});
	})
	$(".user-preference-checkbox").click(function() {
		let val = $(this).is(":checked") ? "True" : "False";
		let pref = $(this).attr("data-pref");

		changePreferences(pref, val);
	})

	function changePreferences(pref, val) {
		$.get("{{ url_for('preferences.change_preferences') }}", {
			"pref": pref,
			"val": val
		})
		.done(function(data) {
			if (data[0]) showNotification(data[1], "is-success");
			else showNotification(data[1], "is-danger")
		});
	}

    $("#quit-link").click(function (e) {
      e.preventDefault();
      // {# MSG: Confirmation text whe the user selects quit. #}
      if (window.confirm("{{ _('Are you sure you want to quit?') }}")) {
        location.href = this.href;
      }
    });

    $("#shutdown-link").click(function (e) {
      e.preventDefault();
      // {# MSG: Confirmation text whe the user starts to turn off the machine running Pikaraoke. #}
      if (window.confirm("{{ _('Are you sure you want to shut down?') }}")) {
        location.href = this.href;
      }
    });

    $("#clear-preferences-link").click(function (e) {
      e.preventDefault();
      // {# MSG: Confirmation text whe the user clears preferences. #}
      if (window.confirm("{{ _('Are you sure you want to clear your preferences?') }}")) {
        location.href = this.href;
      }
    });

    $("#restart-link").click(function (e) {
      e.preventDefault();
      // {# MSG: Confirmation text whe the user starts to reboot the machine running Pikaraoke. #}
      if (window.confirm("{{ _('Are you sure you want to reboot?') }}")) {
        location.href = this.href;
      }
    });

    $("#update-ytdl-link").click(function (e) {
      e.preventDefault();
      if (
        window.confirm(
          // {# MSG: Confirmation text whe the user asks to update the Youtube-dl tool. #}
          "{{ _('Are you sure you want to update Youtube-dl right now? Current and pending downloads may fail.') }}"
        )
      ) {
        location.href = this.href;
      }
    });

    $("#expand-link").click(function (e) {
      e.preventDefault();
      // {# MSG: Confirmation text when the user wants to expand the filesystem to take the entire SD card. #}
      if (window.confirm("Are you sure you want to expand the filesystem? This will reboot your raspberry pi.")) {
        location.href = this.href;
      }
    });
  });
</script>
{% endblock %}

{% block header %}
  <h1>{% block title %}
    {# MSG: Title of the information page. #}
    {% trans %}Information{% endtrans %}
  {% endblock %}</h1>
{% endblock %}

{% block content %}
<hr/>

<div class="has-text-centered">
  <p>
    {# MSG: Label which appears before a url which links to the current page. #}
    {%- trans -%}
      URL of {{site_title}}:
    {%- endtrans -%}
  </p>
  <p class="is-size-4 has-text-warning has-text-centered">{{ url }}</p>
  {# MSG: Label before a QR code which brings a frind (pal) to the main page if scanned, so they can also add songs. QR code follows this text. #}
  <p>{% trans %}Handy URL QR code to share with a pal:{% endtrans %}</p>
  <img id="qr-img" width="300px" src="{{ url_for('images.qrcode') }}" style="image-rendering: pixelated" />

  </div>

  <hr />


{% if admin %}

{# MSG: Header of the information section about the computer running Pikaraoke. #}
<h1>{% trans %}System Info{% endtrans %}</h1>
<ul>
  {# MSG: The hardware platform  #}
  <li><u>{% trans %}Platform:{% endtrans %}</u> {{ platform }}</li>
  {# MSG: The os version  #}
  <li><u>{% trans %}OS Version:{% endtrans %}</u> {{ os_version }}</li>
  {# MSG: The version of the program "Youtube-dl". #}
  <li><u>{% trans %}Youtube-dl (yt-dlp) version:{% endtrans %}</u> {{ youtubedl_version }}</li>
  {# MSG: The version of the program "ffmpeg". #}
  <li><u>{% trans %}FFmpeg version:{% endtrans %}</u> {{ ffmpeg_version }} {% if not is_transpose_enabled %} (missing lib-rubberband, pitch shift is not supported) {% endif %}</li>
  {# MSG: The version of Pikaraoke running right now. #}
  <li><u>{% trans %}Pikaraoke version:{% endtrans %}</u> {{ pikaraoke_version }}</li>
</ul>
<h1>{% trans %}System stats{% endtrans %}</h1>
<ul>
  {# MSG: The CPU usage of the computer running Pikaraoke. #}
  <li>{% trans %}CPU: {{ cpu }}{% endtrans %}</li>
  {# MSG: The disk usage of the computer running Pikaraoke. Used by downloaded songs. #}
  <li>{% trans %}Disk Usage: {{ disk }}{% endtrans %}</li>
  {# MSG: The memory (RAM) usage of the computer running Pikaraoke. #}
  <li>{% trans %}Memory: {{ memory }}{% endtrans %}</li>
</ul>

<hr />

{# MSG: Title of the user preferences section. #}
<h1>{% trans %}User Preferences{% endtrans %}</h1>

<h4>{# MSG: Title text for the splash screen settings section of preferences #}{% trans %}Splash screen settings{% endtrans %}</h4>

{# MSG: Help text explaining the the need to restart after changing splash screen preferences #}
<p class="has-text-warning" style="margin-top: 10px">{% trans %}*You may need to refresh the splash screen for these changes to take effect.{% endtrans %}</p>

<div class="user-preference-container">
  <input id="pref-bg-music" class="user-preference-checkbox" type="checkbox" data-pref="disable_bg_music" {% if disable_bg_music %}checked{% endif %}>
  <label class="label">{# MSG: Checkbox label which enable/disables background music on the Splash Screen #} {% trans %}Disable background music{% endtrans %}
  </label>
</div>

<div class="user-preference-container">
  <input id="pref-bg-video" class="user-preference-checkbox" type="checkbox" data-pref="disable_bg_video" {% if disable_bg_video %}checked{% endif %}>
  <label class="label">{# MSG: Checkbox label which enable/disables background video on the Splash Screen #} {% trans %}Disable background video{% endtrans %}
  </label>
</div>

<div class="user-preference-container">
  <input id="pref-score" type="checkbox" class="user-preference-checkbox" data-pref="disable_score" {% if disable_score %}checked{% endif %}>
  <label class="label">{# MSG: Checkbox label which enable/disables the Score Screen #} {% trans %}Disable the score screen after each song{% endtrans %}
  </label>
</div>

<div class="user-preference-container">
  <input id="pref-notifications" type="checkbox" class="user-preference-checkbox" data-pref="hide_notifications" {% if hide_notifications %}checked{% endif %}>
  <label class="label">{# MSG: Checkbox label which enable/disables notifications on the splash screen #} {% trans %}Hide notifications{% endtrans %}
  </label>
</div>

<div class="user-preference-container">
  <input id="pref-qr-code" type="checkbox" class="user-preference-checkbox" data-pref="hide_url" {% if hide_url %}checked{% endif %}>
  <label class="label">{# MSG: Checkbox label which enable/disables the URL display #} {% trans %}Hide the URL and QR code{% endtrans %}
  </label>
</div>

<div class="user-preference-container">
  <input id="pref-overlay" type="checkbox" class="user-preference-checkbox" data-pref="hide_overlay" {% if hide_overlay %}checked{% endif %}>
  <label class="label">{# MSG: Checkbox label which enable/disables showing overlay data on the splash screen #} {% trans %}Hide all overlays, including now playing, up next, and QR code{% endtrans %}
  </label>
</div>

<div class="user-preference-container">
  <input id="pref-volume" class="user-preference-input" type="number" min="0" max="100" step="5" data-pref="volume" data-start-value="{{ volume }}" value="{{ volume }}" />
  <label class="label">{# MSG: Numberbox label for setting the default video volume#} {% trans %}Default volume of the videos (min 0, max 100){% endtrans %}
  </label>
</div>

<div class="user-preference-container">
  <input id="bg-music-volume" class="user-preference-input" type="number" min="0" max="100" step="5" data-pref="bg_music_volume" data-start-value="{{ bg_music_volume }}" value="{{ bg_music_volume }}" />
  <label class="label">{# MSG: Numberbox label for setting the background music volume#} {% trans %}Volume of the background music (min 0, max 100){% endtrans %}
  </label>
</div>

<div class="user-preference-container">
  <input id="pref-screensaver-timeout" class="user-preference-input" type="number" min="0" max="999" data-pref="screensaver_timeout" data-start-value="{{ screensaver_timeout }}" value="{{ screensaver_timeout }}" />
  <label class="label">
    {# MSG: Numberbox label for setting the inactive delay before showing the screensaver  #} {% trans %}The amount of idle time in seconds before the screen saver activates. Set to 0 to disable it.{% endtrans %}
  </label>
</div>

<div class="user-preference-container">
  <input id="pref-splash-delay" class="user-preference-input" type="number" min="0" max="99" data-pref="splash_delay" data-start-value="{{ splash_delay }}" value="{{ splash_delay }}" />
  <label class="label">
      {# MSG: Numberbox label for setting the delay before playing the next song #} {% trans %}The delay in seconds before starting the next song{% endtrans %}
  </label>
</div>

<h4 style="margin-top: 20px">{# MSG: Title text for the server settings section of preferences #}{% trans %}Server settings{% endtrans %}</h4>

<div class="user-preference-container">
  <input id="pref-normalize" type="checkbox" class="user-preference-checkbox" data-pref="normalize_audio" {% if normalize_audio %}checked{% endif %}>
  <label class="label">{# MSG: Checkbox label which enable/disables audio volume normalization #} {% trans %}Normalize audio volume{% endtrans %}
  </label>
</div>

<div class="user-preference-container">
  <input id="pref-high-quality" type="checkbox" class="user-preference-checkbox" data-pref="high_quality" {% if high_quality %}checked{% endif %}>
  <label class="label">{# MSG: Checkbox label which enable/disables high quality video downloads #} {% trans %}Download high quality videos{% endtrans %}
  </label>
</div>

<div class="user-preference-container">
  <input id="pref-complete_transcode_before_play" type="checkbox" class="user-preference-checkbox" data-pref="complete_transcode_before_play" {% if complete_transcode_before_play %}checked{% endif %}>
  <label class="label">{# MSG: Checkbox label which enable/disables full transcode before playback #} {% trans %}Transcode video completely before playing (better browser compatibility, slower starts). Buffer size will be ignored.*{% endtrans %}
  </label>
</div>

<div class="user-preference-container">
  <input id="pref-avsync" class="user-preference-input" type="number" step="0.1" min="-10" max="10" data-pref="avsync" data-start-value="{{ avsync }}" value="{{ avsync }}" />
  <label class="label">
      {# MSG: Numberbox label for audio video synchronization #} {% trans %}Fix the audio and video synchronization in seconds (negative = advances audio | positive = delays audio){% endtrans %}
  </label>
</div>

<div class="user-preference-container">
  <input id="pref-limit-user-songs-by" class="user-preference-input" type="number" min="0" max="99" data-pref="limit_user_songs_by" data-start-value="{{ limit_user_songs_by }}" value="{{ limit_user_songs_by }}" />
  <label class="label">
      {# MSG: Numberbox label for limitting the number of songs for each player #} {% trans %}Limit of songs an individual user can add to the queue (0 = unlimited){% endtrans %}
  </label>
</div>

<div class="user-preference-container">
  <input id="pref-buffer-size" class="user-preference-input" type="number" min="0" max="9999" data-pref="buffer_size" data-start-value="{{ buffer_size }}" value="{{ buffer_size }}" />
  <label class="label">
      {# MSG: Numberbox label for setting the buffer size in kilobytes  #} {% trans %}Buffer size in kilobytes. Transcode this amount of the video before sending it to the splash screen. {% endtrans %}
  </label>
</div>

<p class="help">{# MSG: Help text explaining when videos will be transcoded  #} {% trans %}* Videos are only transcoded when: normalization is on, audio/video synchronization not zero, a song is transposed, playing a CDG/MOV/AVI/MKV file. Most unmodified MP4 files will not need to be transcoded.{% endtrans %} </p>

<div style="margin-top: 20px">
  {# MSG: Text for the link where the user can clear all user preferences #}
  <a id="clear-preferences-link" class="has-text-danger" href="{{ url_for('preferences.clear_preferences') }}">{% trans %}Clear preferences{% endtrans %}</a>
</div>

<hr/>

{# MSG: Title of the updates section. #}
<h1>{% trans %}Updates{% endtrans %}</h1>
{# MSG: Label before a link which forces Pikaraoke to rescan and pick up any new songs. #}
<p>{% trans %}Refresh the song list:{% endtrans %}</p>
<ul>
  <li>
    <a href="{{ url_for('admin.refresh') }}"
    {# MSG: Text on the link which forces Pikaraoke to rescan and pick up any new songs. #}
      >{% trans %}Rescan song directory{% endtrans %}</a
    >
  </li>
</ul>
{# MSG: Help text explaining the Rescan song directory link. #}
<p class="help">{% trans -%}
  You should only need to do this if you manually copied files to the download directory while pikaraoke was running.
  {%- endtrans %}</p>

{# MSG: Text explaining why you might want to update youtube-dl. #}
<p>{% trans %}If downloads or searches stopped working, updating youtube-dl will probably fix it.
   The current installed version is: "{{ youtubedl_version }}"{% endtrans %}</p>
<ul>
  <li>
    <a id="update-ytdl-link" href="{{ url_for('admin.update_ytdl') }}"
    {# MSG: Text for the link which will try and update youtube-dl on the machine running Pikaraoke. #}
      >{% trans %}Update youtube-dl{% endtrans %}</a
    >
  </li>
</ul>
<p class="help">
  {# MSG: Help text which explains why updating youtube-dl can fail. The log is a file on the machine running Pikaraoke. #}
  {% trans -%}
    This update link above may fail if you don't have proper file permissions.
    Check the pikaraoke log for errors.
  {%- endtrans %}
</p>

{# MSG: Title of the section on shutting down / turning off the machine running Pikaraoke. #}
<h1>{% trans %}Shutdown{% endtrans %}</h1>
<p>
  {# MSG: Explainitory text which explains why to use the shutdown link. #}
  {% trans -%}
    Don't just pull the plug! Always shut down your server properly to avoid data corruption.
  {%- endtrans %}
</p>
<ul>
  {# MSG: Text for button which turns off Pikaraoke for everyone using it at your house. #}
  <li><a id="quit-link" href="{{ url_for('admin.quit') }}">{% trans %}Quit Pikaraoke{% endtrans %}</a></li>
  {% if is_pi or is_linux %}
    {# MSG: Text for button which reboots the machine running Pikaraoke. #}
    <li><a id="restart-link" href="{{ url_for('admin.reboot') }}">{% trans %}Reboot System{% endtrans %}</a></li>
    <li>
      {# MSG: Text for button which turn soff the machine running Pikaraoke. #}
      <a id="shutdown-link" href="{{ url_for('admin.shutdown') }}">{% trans %}Shutdown System{% endtrans %}</a>
    </li>
  {% endif %}
</ul>

{% if is_pi %}
  {# MSG: Title for section containing a few other options on the Info page. #}
  <h1>{% trans %}Other{% endtrans %}</h1>
  <a id="expand-link" href="{{ url_for('admin.expand_fs') }}">
    {# MSG: Text for button#}
    {% trans %}Expand Raspberry Pi filesystem{% endtrans %}
  </a></li>
  {# MSG: Explainitory text which explains why you might want to expand the filesystem. #}
  <p class="help">{% trans -%}
    If you just installed the pre-built pikaraoke pi image and your SD card is larger than 4GB,
    you may want to expand the filesystem to utilize the remaining space. You only need to do this once.
    This will reboot the system.
  {%- endtrans %}</p>
{% endif %}

<hr/>
{% if admin_enabled %}
  {# MSG: Link which will log out the user from admin mode. #}
  <p>{% trans logout_url=url_for('admin.logout') -%}
    Disable admin mode: <a href="{{ logout_url }}">Log out</a>
  {%- endtrans %}</p>
{% endif %}
{% else %} {# from if admin #}
  {# MSG: Link which will let the user log into admin mode. #}
  <p>{% trans login_url=url_for('admin.login') %}
    Enable admin mode: <a href="{{ login_url }}">Log in</a>
  {% endtrans %}</p>
{% endif %}

<style>
  .user-preference-container {
    display: flex;
    margin-bottom: 8px;
  }
  .user-preference-input {
    min-width: 60px;
    margin-right: 8px;
  }
  .user-preference-checkbox {
    margin-right: 8px;
    min-width: 20px;
  }
</style>

{% endblock %}
