{{define "content"}}
  <div class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <div class="card">
            <div class="card-body">
              <div class="discord-container">
                <div class="channel-header">
                  <span class="channel-name">#ticket-{{.ticketId}}</span>
                </div>
                <div id="message-container">
                    {{range .messages}}
                      <div class="message">
                        <b>{{.username}}</b>
                          {{.content}}
                      </div>
                    {{end}}
                </div>
                <div class="input-container">
                  <form action="javascript:sendMessage()">
                      {{if .premium}}
                        <input type="text" class="form-control message-input" id="message" name="message"
                               placeholder="Message #ticket-{{.ticketId}}">
                      {{else}}
                        <input type="text" class="form-control message-input" id="message" name="message"
                               placeholder="Premium users get live messages and can respond through webchat" disabled>
                      {{end}}
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
        <div style="position: absolute; right: 10px; min-width: 300px">
          {{if .isError}}
            <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">
              <div class="toast-header">
                <strong class="mr-auto">Error</strong>
                <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="toast-body">
                {{.error}}
              </div>
            </div>
          {{end}}
        </div>
      </div>

      <script>
          $('.toast').toast('show');
      </script>
    </div>
  </div>

  <script>
      // Scroll to bottom
      let container = document.getElementById("message-container");
      container.scrollTop = container.scrollHeight;
  </script>

  {{if .premium}}
  <script>
      ws = new WebSocket("wss://panel.ticketsbot.net/webchat");

      ws.onopen = (evt) => {
          ws.send(JSON.stringify({
              "type": "auth",
              "data": {
                  "guild": "{{.guildId}}",
                  "ticket": "{{.ticketId}}"
              }
          }));
      };

      ws.onmessage = (evt) => {
          let data = JSON.parse(evt.data);

          let container = document.getElementById("message-container");

          let element = document.createElement("div");
          element.className = "message";
          element.innerHTML = `
            <b>${data.username}</b>
            ${data.content}
          `;

          container.appendChild(element);

          // Scroll to bottom
          container.scrollTop = container.scrollHeight;
      };

      function sendMessage() {
          let msg = document.getElementById("message").value;
          document.getElementById("message").value = "";

          ws.send(JSON.stringify({
              "type": "send",
              "data": msg
          }))
      }
  </script>
  {{end}}
{{end}}