extends ../../layout/main
block view-content

  .uk-section.uk-section-default
    .uk-container

      form(method="POST", action= `/chat/room/${room._id}/settings`).uk-form
        .uk-card.uk-card-default.uk-card-small
          .uk-card-header
            h1.uk-card-title Room Settings

          .uk-card-body
            .uk-margin
              label(for="name") Room Name
              input(id="name", name="name", type="text", placeholder="Enter room name", value= room.name).uk-input
            .uk-margin
              label(for="topic") Topic
              input(id="topic", name="topic", type="text", placeholder="Enter room topic or leave blank", value= room.topic).uk-input
            .uk-margin
              label(for="expireDays") Message expiration
              div(uk-grid).uk-grid-small
                .uk-width-large
                  input(
                    id="expire-days",
                    name="expireDays",
                    type="range",
                    min= 1,
                    max= 30,
                    step= 1,
                    value= room.settings.expireDays,
                    oninput= "return updateExpireDays(event);",
                  ).uk-range
                .uk-width-auto
                  div(id="expire-days-display") #{room.settings.expireDays} days

          .uk-card-footer
            div(uk-grid).uk-grid-small
              .uk-width-expand
                a(href=`/chat/room/${room._id}`).uk-button.uk-button-defalt.uk-border-rounded Back to room
              .uk-width-auto
                button(
                  type="button",
                  data-room-id= room._id,
                  data-room-name= room.name,
                  onclick="dtp.app.confirmRoomDelete(event);",
                ).uk-button.uk-button-danger.uk-border-rounded Delete Room
              .uk-width-auto
                button(type="submit").uk-button.uk-button-primary.uk-border-rounded Save Settings
block viewjs
  script.
    const expireDaysDisplay = document.querySelector('#expire-days-display');
    function updateExpireDays (event) {
      const range = event.currentTarget || event.target;
      dtp.app.log.info('ChatSettingsView', 'expiration days is changing', { range });
      expireDaysDisplay.textContent = `${range.value} days`;
    }