{{define "content"}}
  <div class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <div class="card">
            <div class="card-body">
              <h4 class="card-title">Close Ticket</h4>
              <div class="close-container">
                <form class="form-inline" action="javascript:close()">
                  <input type="text" class="form-control" id="reason" name="reason" placeholder="No reason specified" style="width: 80%">
                  <div style="padding-left: 10px">
                    <button type="submit" class="btn btn-primary btn-fill">Close Ticket</button>
                  </div>
                </form>
              </div>

              <h4 class="card-title">View Ticket</h4>
              <div class="discord-container">
                <div class="channel-header">
                  <span id="channel-name"></span>
                </div>
                <div id="message-container">
                </div>
                <div class="input-container">
                  <form onsubmit="sendMessage(); return false;">
                    <input type="text" class="form-control message-input" id="message" name="message">
                  </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" id="toast-container">
        </div>
      </div>
    </div>
  </div>

  <script>
    async function close() {
        const reason = document.getElementById('reason').value;
        document.getElementById('reason').value = '';

        const res = await axios.delete('/api/{{.guildId}}/tickets/{{.ticketId}}', {
            data: {
                reason: reason
            }
        });

        if (res.status === 200 && res.data.success) {
            location.href = '/manage/{{.guildId}}/tickets';
        } else {
            showToast('Error', res.data.error);
        }
    }
  </script>

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

    async function appendMessages(messages) {
        const container = document.getElementById('message-container');

        for (message of messages) {
            const div = document.createElement('div');
            div.classList.add('message');

            const username = document.createElement('b');
            username.appendChild(document.createTextNode(message.username));
            username.appendChild(document.createTextNode(': '));
            div.appendChild(username);

            div.appendChild(document.createTextNode(message.content));

            container.appendChild(div);
        }
    }

    async function loadData() {
        const premium = await isPremium();

        const res = await axios.get('/api/{{.guildId}}/tickets/{{.ticketId}}');
        if (res.status === 200 && res.data.success) {
            const data = res.data;
            document.getElementById('channel-name').innerText = `#ticket-${data.ticket.Id}`;
            await appendMessages(data.messages);

            startWebsocket(data.ticket.Id);
        } else {
            showToast('Error', res.data.error);
        }

        const el = document.getElementById('message');
        if (premium) {
            el.placeholder = `Message #ticket-${res.data.ticket.Id}`;
        } else {
            el.disabled = true;
            el.placeholder = 'Premium users get live messages and can respond through webchat'
        }
    }

    withLoadingScreen(loadData);
  </script>

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

    async function startWebsocket(ticketId) {
      //const ws = new WebSocket("wss://panel.ticketsbot.net/webchat");
      const ws = new WebSocket("ws://localhost:3000/webchat");

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

      ws.onmessage = (evt) => {
        const data = JSON.parse(evt.data);
        appendMessages([data]);
        container.scrollTop = container.scrollHeight;
      };
    }

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

      const res = await axios.post('/api/{{.guildId}}/tickets/{{.ticketId}}', {message: msg});
      if (res.status !== 200 || !res.data.success) {
          showToast('Error', res.data.error);
      }
    }
  </script>
{{end}}