{% extends 'base.html' %}

{% block scripts %}
<script>
  $(function () {

    var currentName = {{ raw_stem | tojson }};

    // Nothing to save until the name differs from the one on disk, so the button
    // answers "does this song already fit?" without a round trip.
    function updateSaveState() {
      var val = $.trim($('#new_file_name').val());
      $('#save-button').prop('disabled', val === '' || val === currentName);
    }

    function fetchSuggestions() {
      var filename = $.trim($('#new_file_name').val());
      if (!filename) return;
      var $btn = $('#suggest-title');
      $btn.addClass("is-loading");
      $("#suggest_results").html("");
      var country = $('#itunes-country').val();
      $.getJSON(window.pikaraokeConfig.basePath + '/metadata/suggest-names', { filename: filename, limit: 5, country: country }, function (data) {
        var $container = $("#suggest_results").empty();
        if (data.suggestions && data.suggestions.length > 0) {
          $.each(data.suggestions, function (i, item) {
            var display = item.display || (item.title + " - " + item.artist);
            var $text = $('<span class="suggest-text">').text(display);
            if (item.year || item.genre) {
              var parts = [];
              if (item.year) parts.push(item.year);
              if (item.genre) parts.push(item.genre);
              $text.append($('<span class="suggest-meta">').text(" (" + parts.join(", ") + ")"));
            }
            // Percent, because the score is anchored rather than ranked: 100 means
            // "already correct", not "best of these five". The reason explains a
            // number below that, which the number alone can only assert.
            var $score = $('<span class="suggest-score">');
            if (item.score != null) {
              $score.text(item.score + '%');
              if (item.reason) $score.attr('title', item.reason);
            }
            $('<a class="suggested_item has-background-grey-dark">').data('name', display).append($text).append($score).appendTo($container);
          });
          // {# MSG: Help text explaining that clicking a suggestion copies it to the filename input. #}
          $container.append('<p class="is-size-7 has-text-grey-light mt-2">{{ _("Click a suggestion to use it as the new filename.") | forceescape }}</p>');
        } else {
          // {# MSG: Warning when no suggested tracks are found for a search. #}
          $container.html('<span class="has-text-grey-light">{{ _("No suggestion!") | forceescape }}</span>');
        }
      }).always(function () {
        $btn.removeClass("is-loading");
      });
    }

    $('#suggest-title').click(function (e) {
      fetchSuggestions();
    });

    $('#auto-format').click(function () {
      var $btn = $(this);
      var filename = $.trim($('#new_file_name').val());
      if (!filename) return;
      $btn.addClass("is-loading");
      $.getJSON(window.pikaraokeConfig.basePath + '/metadata/auto-format', { filename: filename }, function (data) {
        if (data.formatted_name) {
          $('#new_file_name').val(data.formatted_name);
          updateSaveState();
        }
      }).always(function () {
        $btn.removeClass("is-loading");
      });
    });

    $('#swap-order').click(function (e) {
      var val = $('#new_file_name').val();
      var idx = val.indexOf(' - ');
      if (idx === -1) return;
      var part1 = val.substring(0, idx);
      var part2 = val.substring(idx + 3);
      $('#new_file_name').val(part2 + ' - ' + part1);
      updateSaveState();
    });

    $("#suggest_results").on("click", ".suggested_item", function () {
      $('#new_file_name').val($(this).data('name'));
      updateSaveState();
    });

    $('#new_file_name').on('input', updateSaveState);
    updateSaveState();

  });
</script>
{% endblock %}

{% block content %}

<div class="field">
  <form action="{{ url_for('files.edit_file') }}" method="post">
    <div class="field">
      {# MSG: Label showing the original filename on disk before editing. #}
      <label class="label">{% trans %}Current filename{% endtrans %}</label>
      <div class="card">
        <div class="card-content py-2 px-3">
          <div class="is-flex is-align-items-center">
            <span class="break-word">{{ raw_stem }}</span>
            {% if format_icon %}
            <img src="{{ url_for('static', filename='images/formats/' + format_icon + '.png') }}"
              alt="{{ format_icon }}" class="format-badge ml-3">
            {% endif %}
          </div>
        </div>
      </div>
    </div>
    <input value="{{ song }}" type="hidden" name='old_file_name'>
    <input type="hidden" name="referrer" value="{{ referrer }}">
    {% if error %}
    <div class="notification is-danger">{{ error }}</div>
    {% endif %}
    {# MSG: Label for the input where the user types the new filename. #}
    <label class="label">{% trans %}New filename{% endtrans %}</label>
    <div class="field">
      <div class="control">
        <input autocomplete="off" id="new_file_name" class="input" type="text" name="new_file_name"
          value="{{ new_name }}">
      </div>
    </div>
    <div class="buttons are-small mb-4">
      {# MSG: Label on button which applies automatic formatting to tidy the filename. #}
      <button type="button" class="button is-rounded is-link" id="auto-format">
        <span class="icon"><i class="icon-pencil"></i></span>
        <span>{% trans %}Auto Format{% endtrans %}</span>
      </button>
      {# MSG: Label on button which swaps the artist and title around the dash separator. #}
      <button type="button" class="button is-rounded is-link" id="swap-order">
        <span class="icon"><i class="icon-exchange"></i></span>
        <span>{% trans %}Swap Artist/Title{% endtrans %}</span>
      </button>
      <div class="field has-addons mb-0">
        <div class="control">
          {# MSG: Label on button which searches for track name suggestions from iTunes. #}
          <button type="button" class="button is-small is-info" id="suggest-title">
            <span class="icon"><i class="icon-search-1"></i></span>
            <span>{% trans %}Suggest from iTunes{% endtrans %}</span>
          </button>
        </div>
        <div class="control">
          <div class="select is-small">
            <select id="itunes-country" title="{% trans %}iTunes search country{% endtrans %}">
              {% for code, name in itunes_countries.items() %}
              <option value="{{ code }}" {% if itunes_search_country == code %}selected{% endif %}>{{ name }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
      </div>
    </div>
    <div id="suggest_results" class="mb-4"></div>
    <div class="field is-grouped">
      <div class="control">
        <button class="button is-primary" id="save-button" type="submit">
          {# MSG: Label on button which saves the changes. #}
          {%- trans %}Save{% endtrans -%}
        </button>
      </div>
      <div class="control">
        <a class="button is-light" href="{{ referrer }}">
          {%- trans %}Cancel{% endtrans -%}
        </a>
      </div>
    </div>
  </form>
  <div class="has-text-right mt-4">
    <a class="confirm-delete-file has-text-danger"
      href="{{url_for('files.delete_file')}}?song={{url_escape(song)}}&referrer={{url_escape(referrer)}}"><i class="icon icon-trash-empty"></i>
      {# MSG: Label on button which deletes the current song. #}
      {%- trans -%}
        Delete this song
      {%- endtrans -%}
    </a>
  </div>
</div>

{% endblock %}