furumusic/templates/admin/release_form.html

{% extends "admin/layout.html" %}
{% block admin_title %}{% if is_edit %}{{ t.releases_edit_heading }}{% else %}{{ t.releases_new_heading }}{% endif %}{% endblock admin_title %}

{% block content %}
<h1>{% if is_edit %}{{ t.releases_edit_heading }}{% else %}{{ t.releases_new_heading }}{% endif %}</h1>

<form method="post" action="{% if is_edit %}/admin/releases/{{ form_release_id }}/edit{% else %}/admin/releases/new{% endif %}" id="release-form">
  <table>
    <tr>
      <td><label for="title">{{ t.releases_title }}</label></td>
      <td><input name="title" id="title" value="{{ form_title }}" required style="width:100%"></td>
    </tr>
    <tr>
      <td><label for="release_type">{{ t.releases_type }}</label></td>
      <td>
        <select name="release_type" id="release_type" style="width:100%; padding:.4rem;">
          {% for rt in release_types %}
          <option value="{{ rt.0 }}"{% if form_release_type == rt.0 %} selected{% endif %}>{% if lang_code == "ru" %}{{ rt.2 }}{% else %}{{ rt.1 }}{% endif %} ({{ rt.0 }})</option>
          {% endfor %}
        </select>
      </td>
    </tr>
    <tr>
      <td><label for="year">{{ t.releases_year }}</label></td>
      <td><input name="year" id="year" type="number" min="1900" max="2100" value="{{ form_year }}" style="width:100%"></td>
    </tr>
    <tr>
      <td><label>{{ t.releases_artists }}</label></td>
      <td>
        <div id="artist-tags" style="display:flex; flex-wrap:wrap; gap:.3rem; margin-bottom:.5rem;"></div>
        <div style="display:flex; gap:.5rem;">
          <input list="artist-list" id="artist-input" placeholder="{{ t.releases_select_artist }}" style="flex:1; padding:.4rem;">
          <datalist id="artist-list">
            {% for a in artists %}
            <option value="{{ a.name_str() }}" data-id="{{ a.id_val() }}"></option>
            {% endfor %}
          </datalist>
          <button type="button" onclick="addArtist()" style="padding:.4rem .8rem;">+</button>
        </div>
        <input type="hidden" name="artist_id" id="artist-ids-hidden" value="">
      </td>
    </tr>
  </table>
  <button type="submit" style="margin-top: 1rem; padding: .5rem 1.5rem;">{{ t.settings_save }}</button>
</form>

<script>
(function() {
    // Artist data from server
    var allArtists = [
        {% for a in artists %}
        { id: {{ a.id_val() }}, name: "{{ a.name_str() }}" },
        {% endfor %}
    ];

    // Currently selected artist IDs
    var selectedIds = [{% for aid in form_artist_ids %}{{ aid }},{% endfor %}];

    var tagsContainer = document.getElementById('artist-tags');
    var hiddenInput = document.getElementById('artist-ids-hidden');
    var artistInput = document.getElementById('artist-input');

    function findArtistByName(name) {
        var lower = name.toLowerCase().trim();
        for (var i = 0; i < allArtists.length; i++) {
            if (allArtists[i].name.toLowerCase() === lower) return allArtists[i];
        }
        return null;
    }

    function findArtistById(id) {
        for (var i = 0; i < allArtists.length; i++) {
            if (allArtists[i].id === id) return allArtists[i];
        }
        return null;
    }

    function syncHidden() {
        hiddenInput.value = selectedIds.join(',');
    }

    function renderTags() {
        tagsContainer.innerHTML = '';
        for (var i = 0; i < selectedIds.length; i++) {
            var artist = findArtistById(selectedIds[i]);
            if (!artist) continue;
            var tag = document.createElement('span');
            tag.style.cssText = 'display:inline-flex; align-items:center; gap:.3rem; padding:.2rem .5rem; background:#e9ecef; border-radius:4px; font-size:.85rem;';
            tag.textContent = artist.name;
            var btn = document.createElement('button');
            btn.type = 'button';
            btn.textContent = '\u00d7';
            btn.style.cssText = 'background:none; border:none; cursor:pointer; font-size:1rem; color:#c00; padding:0; line-height:1;';
            btn.setAttribute('data-id', artist.id);
            btn.onclick = function() {
                var rid = parseInt(this.getAttribute('data-id'));
                selectedIds = selectedIds.filter(function(x) { return x !== rid; });
                renderTags();
                syncHidden();
            };
            tag.appendChild(btn);
            tagsContainer.appendChild(tag);
        }
    }

    window.addArtist = function() {
        var artist = findArtistByName(artistInput.value);
        if (!artist) return;
        if (selectedIds.indexOf(artist.id) === -1) {
            selectedIds.push(artist.id);
            renderTags();
            syncHidden();
        }
        artistInput.value = '';
    };

    // Allow pressing Enter in the artist input to add
    artistInput.addEventListener('keydown', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            window.addArtist();
        }
    });

    // Initial render
    renderTags();
    syncHidden();
})();
</script>
{% endblock content %}