<div id="tema-score-{{ score.id }}">
  <h4 class="mp-4 text-xl text-beige">
    <i class="fa fa-code mr-2" aria-hidden="true"></i> Editor de partitura
  </h4>
  <h5 class="text-sm text-beige text-right">
    <input name="title"
           id="score-{{ score.id }}-editor-title"
           placeholder="Nom de la partitura"
           value="{{ score.title }}"
           class="border border-beige focus:outline-none
                  rounded
                  bg-brown px-2"
      />
    <button title="Desa els canvis"
            class="mx-1"
            hx-put="/api/tema/{{ score.tema_id }}/score/{{ score.id }}"
            hx-vals="js:{title: document.getElementById('score-{{ score.id }}-editor-title').value, source: editor_{{ score.id }}.getValue()}"
            hx-target="#tema-score-{{ score.id }}"
            hx-swap="outerHTML">
      <i class="fa fa-check" aria-hidden="true"></i>
    </button>
    <button title="Descarta els canvis"
            class="mx-1"
            hx-get="/api/tema/{{ score.tema_id }}/score/{{ score.id }}"
            hx-target="#tema-score-{{ score.id }}"
            hx-swap="outerHTML">
      <i class="fa fa-times" aria-hidden="true"></i>
    </button>
  </h5>
  <h5 class="mp-4 text text-beige">
    Codi Lilypond
    <a href="https://lilypond.org/doc/v2.24/Documentation/learning/simple-notation"
       target="_blank">
      <i class="fa fa-info-circle" aria-hidden="true"></i>
    </a>
  </h5>
  <hr class="h-px mt-1 mb-3 bg-beige border-0">

  <div class="flex flex-col">
    <form class="flex flex-col"
          hx-post="/api/tema/{{ score.tema_id }}/editor/score/{{ score.id }}/render"
          hx-target="#score-{{ score.id }}-render-target"
          hx-swap="outerHTML"
          onsubmit="document.getElementById('lilypond-editor-{{ score.id }}').value = editor_{{ score.id }}.getValue()"
          >
      {% if score.source %}
      <textarea id="lilypond-editor-{{ score.id }}"
                name="source">{{ score.source | safe }}</textarea>
      {% else %}
      <textarea id="lilypond-editor-{{ score.id }}"
                name="source">{% include "lilypond/score_template.ly" %}</textarea>
      {% endif %}
      <script>
        var editor_{{ score.id }} = CodeMirror.fromTextArea(
          document.getElementById("lilypond-editor-{{ score.id }}"), {
            mode: "lilypond",
            lineNumbers: true,
          }
        );
      </script>
      <button title="Previsualitza els canvis"
              type="submit"
              class="flex flex-col items-center">
         <div class="m-2 mt-3 p-1 text-beige
                     border border-beige rounded">
           Previsualitza els canvis
         </div>
       </button>
    </form>
    <div id="score-{{ score.id }}-render-target">
    </div>
  </div>
</div>
