<div class="message-user mt-3" id="{{ ID }}">
  <div class="columns is-mobile">
    <div class="column is-narrow" id="icon-column">
      <figure class="image is-48x48" style="flex-shrink: 0;">
        <img src="icons/bouvai2.png" alt="User Image">
      </figure>
    </div>

    <div class="column" id="content-column">
      <div class="is-flex is-align-items-start mr-5" style="width: 100%;">
        <div class="message-content" style="width: 100%;">
          <div class="message-header">
            <p>You</p>
          </div>
          <div class="message-body" style="width: 100%;">
            <div class="content" id="content-{{ ID }}" style="width: 100%;">
              <div class="field" style="width: 100%;">
                <div class="control" style="width: 100%;">
                  <textarea class="textarea is-small has-fixed-size mt-2"
                            placeholder="Enter your message here"
                            rows="{{ Rows }}"
                            style="background-color: transparent;
                                   width: 100%"
                            name="message">{{ Content }}</textarea>
                </div>
              </div>
              <div class="field is-grouped is-flex is-justify-content-flex-end mb-3">
                <div class="control">
                  <button hx-get="/userMessage?id={{ ID }}"
                          hx-target="closest .message-user"
                          class="button is-danger is-outlined is-small">
                    <span class="icon">
                      <i class="fa-solid fa-xmark"></i>
                    </span>
                  </button>
                </div>
                <div class="control">
                  <div style="display: none"
                       hx-trigger="click from:#edit-button-{{ ID }}"
                       hx-target="next .message-bot"
                       hx-swap="outerHTML"
                       hx-get="/empty"></div>
                  <button class="button is-success is-outlined is-small"
                          hx-post="/editMessage?id={{ ID }}"
                          hx-target="closest .message-user"
                          hx-include="[name='message']"
                          hx-vals="js:{selectedLLMIds: getSelectedModelsIDs()}"
                          hx-swap="outerHTML"
                          id="edit-button-{{ ID }}"
                          hx-trigger="click">
                    <span class="icon">
                      <i class="fa-solid fa-check"></i>
                    </span>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
