{{define "paneleditmodal"}}
  <div class="modal fade" id="editmodal" tabindex="-1" role="dialog" aria-labelledby="editmodal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title"><b>Edit Panel</b></h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>

        <div class="modal-body">
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-4 pr-1">
                <div class="form-group">
                  <label class="black">Panel Title</label>
                  <input type="text" class="form-control" placeholder="Open a ticket!" id="edit-title">
                </div>
              </div>
              <div class="col-md-8 pr-1">
                <div class="form-group">
                  <label class="black">Panel Content</label>
                  <textarea type="text" class="form-control"
                            placeholder="By reacting to this ticket, a ticket will be opened for you."
                            id="edit-content"></textarea>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-2 pr-1">
                <label class="black">Panel Colour</label>
                <div class="input-group mb-3">
                  <input type="color" class="form-control input-fill" id="edit-colour">
                </div>
              </div>

              <div class="col-md-3 pr-1">
                <label class="black">Panel Channel</label>
                <div class="input-group mb-3">
                  <div class="input-group-prepend">
                    <div class="input-group-text">#</div>
                  </div>
                  <select class="form-control" id="edit-channel-container">
                  </select>
                </div>
              </div>

              <div class="col-md-4 pr-1">
                <label class="black">Ticket Channel Category</label>
                <div class="input-group mb-3">
                  <select class="form-control" id="edit-category-container">
                  </select>
                </div>
              </div>
              <div class="col-md-3 pr-1">
                <div class="form-group">
                  <label class="black">Reaction Emote</label>
                  <input type="text" class="form-control" placeholder="envelope_with_arrow" id="edit-reaction">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-4 pr-1 offset-md-4">
                <div class="text-center">
                  <button class="btn btn-primary btn-fill" type="button" data-toggle="collapse" data-target="#edit-advanced" aria-expanded="false" aria-controls="edit-advanced">
                    Expand advanced settings
                  </button>
                </div>
              </div>
            </div>

            <div class="row">
              <div class="collapse" id="edit-advanced" style="width: 100%">
                <div class="container-fluid">
                  <div class="row">
                    <div class="col-md-12 pr-1">
                      <div class="form-group">
                        <label class="black">Welcome Message</label>
                        <textarea type="text" class="form-control" placeholder="If not provided, your server's default welcome message will be used" id="edit-welcome-message"></textarea>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-12 pr-1">
                      <div class="form-group">
                        <label class="black">Mention On Open</label>
                        <select class="selectpicker form-control" id="edit-mentions" multiple data-live-search="true" data-dropup-auto="false" data-size="5" data-display="static">
                        </select>
                      </div>
                    </div>
                  </div>

                  <input type="hidden" id="edit-message-id">
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-primary btn-fill" onclick="updatePanel()">Save</button>
        </div>
      </div>
    </div>
  </div>

  <script>
      function resetEditModal() {
          clear('edit-title', 'edit-content', 'edit-message-id', 'edit-reaction', 'edit-welcome-message');
          $('#edit-mentions').selectpicker('deselectAll');
      }

      registerHideListener('editmodal');
      $('#editmodal').on('hidden.bs.modal', resetEditModal);

      async function openEditModal(messageId) {
          resetEditModal();

          const res = await axios.get('/api/{{.guildId}}/panels');
          if (res.status !== 200) {
              showToast("Error", res.data);
              return;
          }

          const panel = res.data.find(panel => panel.message_id === messageId);
          if (panel === undefined) {
              showToast('Error', 'Panel not found');
              return;
          }

          await fillEditData(panel);

          $('#editmodal').modal('show');
          showBackdrop();
      }

      async function fillEditData(panel) {
          document.getElementById('edit-message-id').value = panel.message_id;
          document.getElementById('edit-title').value = panel.title;
          document.getElementById('edit-content').value = panel.content;
          document.getElementById('edit-colour').value = `#${panel.colour.toString(16)}`;
          document.getElementById('edit-reaction').value = panel.emote;

          if (panel.welcome_message !== null) {
              document.getElementById('edit-welcome-message').value = panel.welcome_message;
          }

          const channels = await getChannels();
          fillChannels('edit-channel-container', channels);
          fillCategories('edit-category-container', channels);
          await fillMentions('edit-mentions');

          setActiveChannel('edit-channel-container', panel.channel_id);
          setActiveCategory(panel);
          setActiveMentions(panel);
      }

      function setActiveCategory(panel) {
          const select = document.getElementById('edit-category-container');
          for (let i = 0; i < select.children.length; i++) {
              const child = select.children[i];
              if (child.value === panel.category_id) {
                  select.selectedIndex = i;
              }
          }
      }

      function setActiveMentions(panel) {
          if (panel.mentions !== null) {
              $('#edit-mentions').selectpicker('val', panel.mentions);
          }
      }

      async function updatePanel() {
          const messageId = document.getElementById('edit-message-id').value;
          const title = document.getElementById('edit-title').value;
          const content = document.getElementById('edit-content').value;
          const emote = document.getElementById('edit-reaction').value.replace(':', '');
          const welcomeMessage = document.getElementById('edit-welcome-message').value;

          const data = {
              message_id: messageId,
              title: title === '' ? 'Open a ticket!' : title,
              content: content === '' ? 'By reacting to this ticket, a message will be opened for you.' : content,
              emote: emote === '' ? 'envelope_with_arrow' : emote,
              colour: parseInt(`0x${document.getElementById('colour').value.slice(1)}`),
              channel_id: document.getElementById('edit-channel-container').options[document.getElementById('edit-channel-container').selectedIndex].value,
              category_id: document.getElementById('edit-category-container').options[document.getElementById('edit-category-container').selectedIndex].value,
              welcome_message: welcomeMessage === '' ? null : welcomeMessage,
              mentions: $('#edit-mentions').val()
          };

          const res = await axios.put('/api/{{.guildId}}/panels/' + messageId, data);
          if (res.status === 200 && res.data.success) {
              showToast('Success', 'Panel updated successfully')
              $('#editmodal').modal('hide');
              resetEditModal();

              // remove old data
              // TODO: Don't remove just update, looks cleaner
              const el = document.getElementById(messageId);
              el.parentNode.removeChild(el);

              data.message_id = res.data.message_id;
              appendPanel(data, await getChannels());
          } else {
              showToast('Error', res.data.error);
          }
      }
  </script>
{{end}}