{{define "content"}}
  <script src="/assets/js/modalbackdrop.js"></script>
  {{template "substitutions" .}}
  {{template "paneleditmodal" .}}

  <div class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <div class="card">
            <div class="card-header">
              <h4 class="card-title">Reaction Panels</h4>
            </div>
            <div class="card-body">
              <p class="white">Your panel quota: <b><span id="panel-count"></span> / <span id="panel-quota"></span></b></p>
              <p class="white" id="premium-ad">Note: You can create unlimited panels with premium</p>

              <table class="table table-hover table-striped">
                <thead>
                <tr>
                  <th>Channel</th>
                  <th>Panel Title</th>
                  <th>Panel Content</th>
                  <th>Ticket Channel Category</th>
                  <th>Edit</th>
                  <th>Delete</th>
                </tr>
                </thead>
                <tbody id="panel-container">
                </tbody>
              </table>
            </div>
          </div>
          <div class="card">
            <div class="card-header">
              <h4 class="card-title">Create A Panel</h4>
            </div>
            <div class="card-body">
              <form onsubmit="createPanel(); return false;">
                <div class="row">
                  <div class="col-md-4 pr-1">
                    <div class="form-group">
                      <label class="black">Panel Title</label>
                      <input name="title" type="text" class="form-control" placeholder="Open a ticket!" id="title">
                    </div>
                  </div>
                  <div class="col-md-8 pr-1">
                    <div class="form-group">
                      <label class="black">Panel Content</label>
                      <textarea name="content" type="text" class="form-control"
                                placeholder="By reacting to this ticket, a ticket will be opened for you." id="content"></textarea>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-3 pr-1">
                    <label class="black">Panel Colour</label>
                    <div class="input-group mb-3">
                      <input name="colour" type="color" class="form-control input-fill" value="#2ECC71" id="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" name="channel" id="channel-container">
                      </select>
                    </div>
                  </div>

                  <div class="col-md-3 pr-1">
                    <label class="black">Ticket Channel Category</label>
                    <div class="input-group mb-3">
                      <select class="form-control" name="categories" id="category-container">
                      </select>
                    </div>
                  </div>

                  <div class="col-md-3 pr-1">
                    <div class="form-group">
                      <label class="black">Reaction Emote</label>
                      <input name="reaction" type="text" class="form-control" placeholder="envelope_with_arrow" id="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="#advanced" aria-expanded="false" aria-controls="advanced">
                        Expand advanced settings
                      </button>
                    </div>
                  </div>
                </div>

                <div class="row">
                  <div class="collapse" id="advanced" style="width: 100%">
                    <div class="container-fluid">
                      <div class="row">
                        <div class="col-md-6 pr-1">
                          <div class="form-group">
                            <label class="black">Welcome Message
                              <i class="fas fa-question pointer" onclick="showSubstitutionModal()"></i>
                            </label>
                            <textarea type="text" class="form-control" placeholder="If not provided, your server's default welcome message will be used" id="welcome_message"></textarea>
                          </div>
                        </div>

                        <div class="col-md-6 pr-1">
                          <div class="form-group">
                            <label class="black" for="mentions">Mention On Open</label>
                            <select class="selectpicker form-control" id="mentions" multiple data-live-search="true" data-dropup-auto="false" data-size="5" data-display="static">
                            </select>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="row">
                  <div class="col-md-2 pr-1 offset-md-5">
                    <div class="form-group text-center">
                      <button type="submit" class="btn btn-primary btn-fill"><i class="fas fa-paper-plane"></i> Submit</button>
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
      <div style="position: absolute; right: 10px" id="toast-container">
      </div>
    </div>

    <script>
      async function getChannels() {
          const res = await axios.get('/api/{{.guildId}}/channels');
          return res.data;
      }

      function getChannelName(channels, channelId) {
          const ch = channels.find(ch => ch.id === channelId);
          if (ch === undefined) {
              return "Unknown";
          } else {
              return ch.name;
          }
      }

      async function deletePanel(messageId) {
          const res = await axios.delete('/api/{{.guildId}}/panels/' + messageId);

          if (res.status === 200 && res.data.success) {
              showToast('Success', 'Panel deleted successfully');

              const el = document.getElementById(messageId);
              el.parentNode.removeChild(el);
          } else {
              showToast('Error', res.data.error);
          }
      }

      async function createPanel() {
          const title = document.getElementById('title').value;
          const content = document.getElementById('content').value;
          const emote = document.getElementById('reaction').value.replace(':', '');
          const welcomeMessage = document.getElementById('welcome_message').value;

          const data = {
              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('channel-container').options[document.getElementById('channel-container').selectedIndex].value,
              category_id: document.getElementById('category-container').options[document.getElementById('category-container').selectedIndex].value,
              welcome_message: welcomeMessage === '' ? null : welcomeMessage,
              mentions: $('#mentions').val()
          };

          const res = await axios.put('/api/{{.guildId}}/panels', data);
          if (res.status === 200 && res.data.success) {
              data.message_id = res.data.message_id;
              appendPanel(data, await getChannels());
              showToast('Success', 'Panel created successfully')
          } else {
              showToast('Error', res.data.error);
          }
      }

      async function fillChannels(elementId, channels) {
          const container = document.getElementById(elementId);

          channels.filter(ch => ch.type === 0).forEach(ch => {
              const el = document.createElement('option');
              el.value = ch.id;
              el.appendChild(document.createTextNode(ch.name));
              container.appendChild(el);
          });
      }

      async function fillCategories(elementId, channels) {
          const container = document.getElementById(elementId);

          channels.filter(ch => ch.type === 4).forEach(ch => {
              const el = document.createElement('option');
              el.value = ch.id;
              el.appendChild(document.createTextNode(ch.name));
              container.appendChild(el);
          });
      }

      // TODO: Update on append / delete
      async function fillPanelQuota(panelCount) {
          const res = await axios.get('/api/{{.guildId}}/premium');

          const el = document.getElementById('panel-quota');
          if (res.data.premium) {
              el.appendChild(document.createTextNode('∞'));
          } else {
              el.appendChild(document.createTextNode('1'));
              document.getElementById('premium-ad').style.display = 'block';
          }

          document.getElementById('panel-count').appendChild(document.createTextNode(panelCount));
      }

      function appendPanel(panel, channels) {
          const container = document.getElementById('panel-container');

          const tr = document.createElement('tr');
          tr.id = panel.message_id; // TODO: When we call this after creating a panel, we don't know the message ID yet

          appendTd(tr, `#${getChannelName(channels, panel.channel_id)}`);
          appendTd(tr, panel.title);
          appendTd(tr, panel.content);
          appendTd(tr, getChannelName(channels, panel.category_id));

          // build edit button
          const editTd = document.createElement('td');
          const editButton = document.createElement('button');
          editButton.type = 'button';
          editButton.classList.add('btn', 'btn-primary', 'btn-fill', 'mx-auto');
          editButton.appendChild(document.createTextNode('Edit'));
          editButton.onclick = () => { openEditModal(panel.message_id) };
          editTd.appendChild(editButton);
          tr.appendChild(editTd);

          // build remove button
          const deleteTd = document.createElement('td');
          const deleteButton = document.createElement('button');
          deleteButton.type = 'submit';
          deleteButton.classList.add('btn', 'btn-primary', 'btn-fill', 'mx-auto');
          deleteButton.appendChild(document.createTextNode('Delete'));
          deleteButton.onclick = () => {deletePanel(panel.message_id)};
          deleteTd.appendChild(deleteButton);
          tr.appendChild(deleteTd);

          container.appendChild(tr);
      }

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

          for (const panel of res.data) {
              appendPanel(panel, channels);
          }

          return res.data.length;
      }

      async function fillMentions(elementId) {
          const select = document.getElementById(elementId);

          // ticket opener
          const ticketOpener = document.createElement('option');
          ticketOpener.value = 'user';
          ticketOpener.appendChild(document.createTextNode('Ticket Opener'));
          select.appendChild(ticketOpener);

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

          if (res.data.roles !== null) {
              for (const role of res.data.roles) {
                  const option = document.createElement('option');
                  option.value = role.id;
                  option.appendChild(document.createTextNode(role.name));
                  select.appendChild(option);
              }
          }

          $(`#${elementId}`).selectpicker('refresh');
      }

      async function loadData() {
          const channels = await getChannels();
          const panelCount = await fillPanels(channels);

          await fillPanelQuota(panelCount);
          await fillChannels('channel-container', channels);
          await fillCategories('category-container', channels);
          await fillMentions('mentions');
      }

      withLoadingScreen(loadData);
    </script>
  </div>
{{end}}