extends ../../layouts/main
block content

  - var formAction = channel ? `/admin/venue/channel/${channel._id}` : '/admin/venue/channel';

  form(method="POST", action= formAction, onsubmit="return dtp.channelEditor.submitForm(event);").uk-form
    .uk-card.uk-card-secondary.uk-card-small
      .uk-card-header
        h1.uk-card-title= channel ? 'Update Channel' : 'Create Channel'

        p You are linking a Shing.tv stream channel to your Venue. Venue wants the Shing channel information, but wants the local user information for the owner of the channel. You are tying a remote Shing channel to a local user of #{site.name}.

      .uk-card-body
        .uk-margin
          label(for="slug").uk-form-label Channel URL
          input(type="url", name="url", placeholder="Paste Shing.tv channel URL", value= channel ? `https://${dtp.services.venue.soapboxDomain}/channel/${channel.slug}` : undefined).uk-input
          .uk-text-small.uk-text-muted #{site.name} integrates #{dtp.services.venue.soapboxDomain} and wants the channel URL from there.

        div(uk-grid)
          div(class="uk-width-1-1 uk-width-2-3@m")
            label(for="stream-key").uk-form-label Stream Key
            div(uk-grid).uk-grid-small.uk-flex-middle
              .uk-width-expand
                input(
                  id="stream-key",
                  name="credentials.streamKey",
                  type="text",
                  placeholder="Paste Shing.tv stream key",
                  data-key-value= channel ? channel.credentials.streamKey : undefined,
                ).uk-input
              .uk-width-auto
                button(
                  type="button",
                  onclick="return dtp.channelEditor.toggleKeyValue(event, 'stream-key');",
                ).uk-button.uk-button-text
                  span
                    i.button-icon.fas.fa-lock
                  span.button-label.uk-margin-small-left Show

          div(class="uk-width-1-1 uk-width-1-3@m")
            label(for="widget-key").uk-form-label Widget Key
            div(uk-grid).uk-grid-small.uk-flex-middle
              .uk-width-expand
                input(
                  id="widget-key",
                  name="credentials.widgetKey",
                  type="text",
                  placeholder="Paste Shing.tv widget key",
                  data-key-value= channel ? channel.credentials.widgetKey : undefined,
                ).uk-input
              .uk-width-auto
                button(
                  type="button",
                  onclick="return dtp.channelEditor.toggleKeyValue(event, 'widget-key');",
                ).uk-button.uk-button-text
                  span
                    i.button-icon.fas.fa-lock
                  span.button-label.uk-margin-small-left Show

        div(uk-grid).uk-flex-middle
          div(class="uk-width-1-1 uk-width-1-2@s")
            label(for="owner").uk-form-label Owner
            .uk-form-controls
              input(id="owner", type="text", name="owner", placeholder=`Enter channel owner's local username (here on ${site.name})`, value= channel ? channel.owner.username : user.username).uk-input

          div(class="uk-width-1-1 uk-width-1-2@s")
            label(for="sort-order").uk-form-label Sort order
            .uk-form-controls
              input(id="sort-order", name="sortOrder", type="number", min=0, step=1, placeholder="Enter channel sort order", value= channel ? channel.sortOrder : 0).uk-input

      div(uk-grid).uk-card-footer
        .uk-width-expand
          +renderBackButton({ includeLabel: true, label: 'Cancel' })

        if channel
          .uk-width-auto
            button(
              type="button",
              data-channel={ _id: channel._id, name: channel.name },
              onclick="return dtp.adminApp.deleteVenueChannel(event);",
            ).uk-button.dtp-button-danger.uk-border-rounded
              span
                i.fas.fa-trash
              span.uk-margin-small-left DELETE

        .uk-width-auto
          button(type="submit").uk-button.dtp-button-primary.uk-border-rounded
            span
              i.fas.fa-save
            span.uk-margin-small-left= channel ? 'Update' : 'Create'

block viewjs
  script.
    (async ( ) => {
      window.dtp = window.dtp || { };
      window.dtp.channelEditor = { };

      window.dtp.channelEditor.toggleKeyValue = async (event, fieldId) => {
        event.preventDefault();
        event.stopPropagation();

        const button = event.currentTarget || event.target;
        const target = document.getElementById(fieldId);
        target.toggleAttribute('data-masked');

        if (target.hasAttribute('data-masked')) {
          target.value = target.getAttribute('data-masked-value');
          target.toggleAttribute('data-masked', true);
          target.toggleAttribute('disabled', true);
          button.querySelector('.button-label').textContent = 'SHOW';
          const icon = button.querySelector('.button-icon');
          icon.classList.remove('fa-lock-open');
          icon.classList.add('fa-lock');
        } else {
          target.value = target.getAttribute('data-key-value');
          target.toggleAttribute('disabled', false);
          button.querySelector('.button-label').textContent = 'HIDE';
          const icon = button.querySelector('.button-icon');
          icon.classList.remove('fa-lock');
          icon.classList.add('fa-lock-open');
        }
      };

      window.dtp.channelEditor.submitForm = async (event) => {
        // simply restore the values back to their key values, and allow the
        // form to submit per normal processing.
        window.dtp.channelEditor.keyInputs.forEach((input) => {
          if (input.hasAttribute('data-masked')) {
            input.value = input.getAttribute('data-key-value');
            input.toggleAttribute('data-masked', false);
            input.toggleAttribute('disabled', false);
          }
          input.style.visibility = 'hidden'; // since we are "showing" the keys
        });
      };

      window.dtp.channelEditor.keyInputs = document.querySelectorAll("input[data-key-value]");
      window.dtp.channelEditor.keyInputs.forEach((input) => {
        const keyValue = input.getAttribute('data-key-value');
        const maskedValue = keyValue.split('').map((char) => '*').join('');
        input.setAttribute('data-masked-value', maskedValue);
        input.toggleAttribute('data-masked', true);
        input.toggleAttribute('disabled', true);
        input.value = maskedValue;
      });

    })();