<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>EBG - Dashboard</title>
    <!-- Essential JS -->
    <script>
      const lang = <%- JSON.stringify(language) %>
    </script>
    <script src="<%= domain %>/appjs/i18next.js?<%= curentUnixTime %>"></script>
    <!-- CSS files -->
    <link href="<%= domain %>/dist/css/tabler.min.css?<%= curentUnixTime %>" rel="stylesheet"/>
    <link href="<%= domain %>/dist/css/tabler-flags.min.css?<%= curentUnixTime %>" rel="stylesheet"/>
  </head>
  <body>
    <script src="/appjs/format.js"></script>
    <div class="page">
      <!-- Navbar -->
      <%- html_content.navbar %>
      <div class="page-wrapper">
        <!-- Page header -->
        <div class="page-header d-print-none">
          <div class="container-xl">
            <div class="row g-0 align-items-center">
              <div class="col">
                <h2 class="page-title" data-translate="Events.Settings.Title"></h2>
              </div>
              <div class="col-auto">
                <span>
                  <a href="/event/<%= params.id %>" class="btn btn-primary">
                    <!-- Download SVG icon from http://tabler-icons.io/i/arrow-left -->
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg>
                    <div data-translate="Button.GoBack"></div>
                  </a>
                </span>
              </div>
          </div>
        </div>
        <!-- Page body -->
        <div class="page-body">
          <div class="container-xl">
            <div class="card">
              <!-- Sidebar Toggle Button for Small Screens -->
              <div class="card-body d-md-none">
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#sidebar-menu" aria-controls="sidebar-menu" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
                </button>
              </div>
              <div class="row g-0">
                <div class="col-12 col-md-3 d-md-block collapse border-end" id="sidebar-menu">
                  <div class="card-body">
                    <div class="list-group list-group-transparent">
                      <a href="/event/<%= params.id %>/settings" class="list-group-item list-group-item-action d-flex align-items-center" data-translate="Events.Settings.Site.General"></a>
                      <a href="/event/<%= params.id %>/settings-announce" class="list-group-item list-group-item-action d-flex align-items-center active" data-translate="Events.Settings.Site.Announce"></a>
                      <a href="/event/<%= params.id %>/settings-oauth" class="list-group-item list-group-item-action d-flex align-items-center" data-translate="Events.Settings.Site.OAuth"></a>
                    </div>
                  </div>
                </div>
                <div class="col d-flex flex-column">
                  <div class="card-body">
                    <h2 class="mb-4" data-translate="Events.Settings.Announce.Headline"></h2>
                    <!-- Announce Type -->
                     <div class="row">
                      <div class="col-lg-5">
                        <div class="mb-5">
                          <label class="form-label" data-translate="Events.Settings.Announce.SelectType"></label>
                          <select class="form-select" id="EventAnnounceSelect">
                            <option value="text" data-translate="Events.Settings.Announce.Text" selected></option>
                          </select>
                        </div>
                      </div>
                     </div>
                    <!-- Description Row-->
                    <div class="row">
                      <div class="col-lg-12">
                        <div class="mb-4">
                          <label class="form-label" data-translate="Events.Settings.Announce.Announce"></label>
                          <textarea class="form-control" id="EventAnnounce" data-translate-placeholder="Events.Settings.Announce.Placeholder.Announce" rows="3"></textarea>
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-lg-12">
                        <div id="NewEventErrorLine"></div>
                      </div>
                    </div>
                    <div class="col-auto" style="float: right;">
                      <span>
                        <button onclick="saveAnnouncement(this.id)" id="SaveEventAnnounceBtn" class="btn btn-primary">
                          <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-file-x"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><path d="M10 12l4 4m0 -4l-4 4" /></svg>
                          <div data-translate="Events.Settings.Announce.Button.Add"></div>
                        </button>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <%- html_content.footer %>
      </div>
    </div>
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="<%= domain %>/appjs/permission.js?<%= curentUnixTime %>" defer></script>
    <script src="<%= domain %>/appjs/translate.js?<%= curentUnixTime %>"></script>
    <script src="<%= domain %>/dist/js/tabler.min.js?<%= curentUnixTime %>" defer></script>
    <script src="<%= domain %>/appjs/layout.js?<%= curentUnixTime %>"></script>
    <script>
      const keys = {
        type: "EventAnnounceSelect",
        announce: "EventAnnounce",
      };
      const saveAnnouncement = async (id) => {
        const announceType = document.getElementById('EventAnnounceSelect').value;
        const announce = document.getElementById('EventAnnounce').value;
        const response = await fetch("/api/v1/event/<%= params.id %>/announce", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            Authorization: "Bearer " + localStorage.getItem("token"),
          },
          body: JSON.stringify({
            type: announceType,
            announce: announce,
          }),
        });

        if (response.status === 200) {
          for (const key in keys) {
            document.getElementById(keys[key]).classList.remove("is-invalid");
          }
          document.getElementById('NewEventErrorLine').innerHTML = `<div class="alert alert-success" role="alert">${i18next.t("Events.Settings.Announce.Success")}</div>`;
        } else {
          const response_json = await response.json();
            if (typeof response_json.reason === "string") {
              document.getElementById("NewEventErrorLine").innerHTML = '<div class="alert alert-danger">' + i18next.t(`Error.${response_json.message}`) + "</div>";
              return;
            }
            const input_name = response_json.reason[0].path[0];
            const input_type = response_json.reason[0].type;
            for (const key in keys) {
              document.getElementById(keys[key]).classList.remove("is-invalid");
            }

            document.getElementById("NewEventErrorLine").innerHTML = '<div class="alert alert-danger">' + i18next.t(`Error.Joi.${input_type}`, { field: i18next.t(`Events.Settings.Announce.${capitalizeFirstLetter(input_name)}`), limit: response_json.reason[0].context?.limit }) + "</div>";
            document.getElementById(keys[input_name]).classList.add("is-invalid");
          }
      }
    </script>
  </body>
</html>