{% extends 'template/template.j2.html' %}

{% block title %}
    {{ $t('sidebar.socketExample') }}
{% endblock %}

{% block content %}
<div class="my-6">
  <h3 class="text-xl font-semibold text-slate-800">
    {{ $t('testWebSocket.title') }}
  </h3>
  <div class="my-3 overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm">
    <div class="p-5">
      <div class="grid grid-cols-1 gap-4 lg:grid-cols-[1fr,260px]">
        <div>
          <label for="socket-output" class="mb-1 block text-sm font-medium text-slate-700">
            {{ $t('testWebSocket.output') }}
          </label>
          <textarea class="h-[350px] w-full rounded-md border border-slate-300 bg-white p-3 text-sm shadow-sm focus:border-primary-500 focus:ring-2 focus:ring-primary-500/30" id="socket-output"></textarea>
        </div>
        <template id="btn-template-client">
          <button data-id="{id}" class="wave socket-client-send mt-1 inline-flex items-center rounded-md border border-primary-600 px-3 py-1.5 text-sm font-medium text-primary-700 hover:bg-primary-50 focus:outline-none focus:ring-2 focus:ring-primary-500/30 disable-wave">
            {text}
          </button>
        </template>
        <div id="client-list" class="pt-6 lg:pt-8">
          <div class="flex flex-col gap-2" data-client-list></div>
        </div>
      </div>
      <div class="mt-4 flex flex-wrap items-center gap-2">
        <button id="btn-socket-time" class="wave inline-flex items-center rounded-md border border-primary-600 px-3 py-1.5 text-sm font-medium text-primary-700 hover:bg-primary-50 focus:outline-none focus:ring-2 focus:ring-primary-500/30 disable-wave">
          {{ $t('testWebSocket.getTime') }}
        </button>
        <button id="btn-socket-fa" class="wave inline-flex items-center rounded-md border border-primary-600 px-3 py-1.5 text-sm font-medium text-primary-700 hover:bg-primary-50 focus:outline-none focus:ring-2 focus:ring-primary-500/30 disable-wave">
          {{ $t('testWebSocket.randomMessage') }}
        </button>
        <button id="btn-socket-clients" class="wave inline-flex items-center rounded-md border border-primary-600 px-3 py-1.5 text-sm font-medium text-primary-700 hover:bg-primary-50 focus:outline-none focus:ring-2 focus:ring-primary-500/30 disable-wave">
          {{ $t('testWebSocket.clientLists') }}
        </button>
        <button id="btn-socket-stream" class="wave inline-flex items-center rounded-md bg-emerald-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-500/30 disable-wave">
          {{ $t('testWebSocket.stream') }}
        </button>
        <div class="ml-auto">
          <button
            onclick="document.getElementById('socket-output').value='';document.getElementById('client-list').innerHTML=''"
            class="wave inline-flex items-center rounded-md border border-rose-600 px-3 py-1.5 text-sm font-medium text-rose-700 hover:bg-rose-50 focus:outline-none focus:ring-2 focus:ring-rose-500/30 disable-wave">
            {{ $t('testWebSocket.clear') }}
          </button>
        </div>
      </div>
    </div>
  <div class="hidden p-5" id="videoStream">
      <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
        <video class="w-full rounded-md border border-slate-200" id="localVideo" autoplay muted></video>
        <video class="w-full rounded-md border border-slate-200" id="serverVideo" controls></video>
      </div>
      <div class="mt-3">
        <button id="wave btn-stop-stream" class="inline-flex items-center rounded-md bg-emerald-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-500/30 disable-wave">
          {{ $t('testWebSocket.stopStream') }}
        </button>
      </div>
    </div>
  </div>
</div>
{% endblock %}