{{ define "modal/conversations" }}
  <div class="conversations-overlay" id="conversations-overlay">
    <div class="conversations-panel" role="dialog" aria-modal="true"
         aria-labelledby="conversations-title">
      <div class="conversations-panel__header">
        <h2 class="conversations-panel__title" id="conversations-title">
          Conversations
        </h2>
        <button
          type="button"
          class="footer__toolbar-btn"
          id="conversations-close"
          aria-label="Close conversations"
        >
          <svg class="icon"><use href="/static/icons.svg#close"></use></svg>
        </button>
      </div>

      <div class="conversations-panel__search">
        <input
          type="search"
          class="conversations-search"
          id="conversation-search"
          placeholder="Search conversations..."
          aria-label="Search conversations"
          autocomplete="off"
        />
      </div>

      <div class="conversations-panel__list" id="conversation-list"></div>
    </div>
  </div>

  <template id="tpl-conversation-item">
    <div class="conversations__item">
      <button type="button" class="conversations__item-main">
        <span class="conversations__item-title"></span>
        <span class="conversations__item-dates">
          <span class="conversations__item-created"></span>
          <span class="conversations__item-updated"></span>
        </span>
      </button>
      <button
        type="button"
        class="conversations__item-btn conversations__item-rename"
        aria-label="Rename conversation"
      >
        <svg class="icon"><use href="/static/icons.svg#edit"></use></svg>
      </button>
      <button
        type="button"
        class="conversations__item-btn conversations__item-delete"
        aria-label="Delete conversation"
      >
        <svg class="icon"><use href="/static/icons.svg#trash"></use></svg>
      </button>
    </div>
  </template>

  <template id="tpl-rename-modal">
    <div class="modal">
      <div class="modal__header">
        <h2>Rename Conversation</h2>
        <button type="button" class="modal__close" aria-label="Cancel">
          <svg class="icon"><use href="/static/icons.svg#close"></use></svg>
        </button>
      </div>
      <div class="modal__body">
        <input
          type="text"
          class="modal__input"
          id="rename-input"
          maxlength="256"
          autocomplete="off"
        />
      </div>
      <div class="modal__footer">
        <button type="button" class="modal__save" id="rename-save">Save</button>
      </div>
    </div>
  </template>
{{ end }}