path: root/views/event.handlebars

<main class="event">
{{#if eventHasCoverImage}}
  <div class="event-header-image" id="eventImageContainer" style="background-image: url(/events/{{eventData.image}});"></div>
{{else}}
  <div class="event-header-image" id="genericEventImageContainer" style="background-image: url(/images/seigaiha.png);"></div>
{{/if}}
<div class="h-event">
<div class="row p-0">
  <div class="col-lg">
      <h3 class="p-name" id="eventName" data-event-id="{{eventData.id}}">{{eventData.name}}</h3>
  </div>
  <div class="col-lg-3 ml-2 edit-buttons">
    {{#if editingEnabled}}
      <button type="button" id="editEvent" class="button button--primary ml-auto d-block" {{#if eventHasConcluded}}disabled{{/if}} data-event-id="{{eventData.id}}" data-toggle="modal" data-target="#editModal"><i class="fas fa-edit"></i> {{t "views.event.edit" }}</button>
    {{/if}}
  </div>
</div>
{{#if message}}
<div class="alert alert-info mt-3 text-center" role="alert" id="event__message">
    {{message}}
</div>
{{/if}}
<div id="event__basics">
  <div class="card" id="event__data">
    <div class="card-body">
      <ul class="fa-ul eventInformation">
        <li>
          <span class="fa-li">
            <i class="fas fa-map-marker-alt"></i>
          </span>
          <span class="p-location">{{eventData.location}}</span>
        </li>
        <li>
          <span class="fa-li">
            <i class="fas fa-fw fa-calendar-day"></i>
          </span>
          <span class="dt-duration">{{{displayDate}}}</span>
          <time class="dt-start" datetime="{{eventStartISO}}"></time>
          <time class="dt-end" datetime="{{eventEndISO}}"></time>
          <br>
          <span class="text-muted">
            {{#if eventHasBegun}}{{#unless eventHasConcluded}}{{t "views.event.started"}} {{else}}{{t "views.event.ended"}} {{/unless}}{{/if}}{{fromNow}}
          </span>
        </li>
        {{#if eventHasHost}}
          <li id="hosted-by">
            <span class="fa-li">
              <i class="fas fa-fw fa-user-circle"></i>
            </span>
            <span class="text-muted">{{{t "views.event.hostedby" }}}
          </li>
        {{/if}}
        {{#if eventData.eventGroup}}
          <li id="event-group">
            <span class="fa-li">
              <i class="fas fa-fw fa-calendar-alt"></i>
            </span>
            <span class="text-muted">{{{t "views.event.partof" }}}</span>
          </li>
        {{/if}}
        {{#if eventData.url}}
          <li>
            <span class="fa-li">
              <i class="fas fa-fw fa-link"></i>
            </span>
            <a href="{{eventData.url}}">
              {{eventData.url}}
            </a>
          </li>
        {{/if}}
        <li>
          <span class="fa-li">
            <i class="fas fa-fw fa-share-square"></i>
          </span>
          <a class="u-url" href="https://{{domain}}/{{eventData.id}}">https://{{domain}}/{{eventData.id}}</a>
          <button type="button" id="copyEventLink" class="eventInformationAction button button--outline-secondary button--sm" data-clipboard-text="https://{{domain}}/{{eventData.id}}">
            <i class="fas fa-copy"></i> {{t "common.copy" }}
          </button>
        </li>
        {{#if isFederated}}
        <li>
          <span class="fa-li">
            <i class="fas fa-fw fa-share-square"></i>
          </span>
          @{{eventData.id}}@{{domain}}
          <button type="button" id="copyAPLink" class="eventInformationAction button button--outline-secondary button--sm" data-clipboard-text="@{{eventData.id}}@{{domain}}">
            <i class="fas fa-copy"></i> {{t "common.copy" }}
          </button>
        </li>
        {{/if}}
      </ul>
    </div> <!-- .card-body -->
  </div> <!-- .card#event__data -->
  <aside id="event__actions">
    <div class="button-stack" role="group" aria-label="Event actions">
      <a href="http://www.google.com/calendar/event?action=TEMPLATE&dates={{parsedStart}}%2F{{parsedEnd}}&text={{escapedName}}&location={{parsedLocation}}&ctz={{timezone}}" class="button button--outline-secondary button--sm">
        <i class="far fa-calendar-plus"></i> {{t "views.event.addtoGC" }}
      </a>
      <button type="button" id="exportICS" class="button button--outline-secondary button--sm" data-event-id="{{eventData.id}}">
        <i class="fas fa-download"></i> {{t "views.event.ICSexport" }}
      </button>
      <a target="_blank" href="http://maps.google.com/?q={{parsedLocation}}" class="button button--outline-secondary button--sm">
        <i class="fas fa-map-marked"></i> {{t "views.event.showonGM" }}
      </a>
      <a target="_blank" href="https://www.openstreetmap.org/search?query={{parsedLocation}}" class="button button--outline-secondary button--sm">
        <i class="fas fa-map-marked"></i> {{t "views.event.showonOM" }}
      </a>
    </div>

    {{#unless editingEnabled}}
        <button type="button" id="editEvent" class="button button--outline-secondary button--sm" {{#if eventHasConcluded}}disabled{{/if}} data-event-id="{{eventData.id}}" data-toggle="modal" data-target="#editTokenModal"><i class="fas fa-edit"></i> {{t "group.editmode" }}</button>
    {{/unless}}
  </aside> <!-- #event__actions -->
</div>

{{#if eventHasConcluded}}
<div class="alert alert-warning mb-4" role="alert">
{{t "views.event.concludeddel" }}</div>
{{/if}}
{{#if firstLoad}}
<div class="alert alert-success alert-dismissible fade show" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  <p>{{t "views.event.welcome" }}</p>
  <p>{{{t "views.event.attention" }}}</p>
  <p>{{{t "views.event.share" }}}</p>
</div>
{{/if}}
<div class="card mb-4" id="eventDescription">
  <h5 class="card-header">{{t "views.event.about" }}</h5>
  <div class="card-body p-summary">
    {{{parsedDescription}}}
  </div>
</div>

{{#if eventData.usersCanAttend}}
<div class="card mb-4" id="eventAttendees">
  <h5 class="card-header">{{t "views.event.attendees" }} {{#if numberOfAttendees}}{{t "views.event.numberofattende" }}{{/if}}
    <div class="button--group" role="group" aria-label="Attendance controls">
      {{#unless noMoreSpots}}
        <button type="button" id="attendEvent" class="button button--primary" data-event-id="{{eventData.id}}"><i class="fas fa-user-plus"></i> {{t "views.event.addme" }}</button>
      {{/unless}}
      <button type="button" id="unattendEvent" class="button button--secondary" data-toggle="modal" data-target="#unattendModal"><i class="fas fa-user-times"></i> {{t "views.event.removeme" }}</button>
    </div>
  </h5>
  <div class="card-body text-center">
    {{#if eventData.maxAttendees}}
      {{#if noMoreSpots}}
        <div class="alert alert-warning text-center" id="attendees-alert">{{t "views.event.capacity" }}</div>
      {{else}}
        <div class="alert alert-warning text-center" id="attendees-alert">{{plural "views.event.remaining" spotsRemaining }}</div>
      {{/if}}
    {{/if}}
    {{#if numberOfAttendees}}
      <ul class="attendeesList">
        {{#each visibleAttendees}}
          <li{{#if ../editingEnabled}} data-attendee-name="{{this.name}}" data-attendee-id="{{this._id}}"{{/if}}><span class="attendee-name">{{this.name}}</span>{{#if ../editingEnabled}} <a href="#" class="remove-attendee" data-toggle="modal" data-target="#removeAttendeeModal" title="{{t "views.event.removeuser" }}"><i class="fas fa-user-times"></i></a>{{/if}}</li>
        {{/each}}
        {{#if editingEnabled}}
          {{#each hiddenAttendees}}
            <li{{#if ../editingEnabled}} data-attendee-name="{{this.name}}" data-attendee-id="{{this._id}}"{{/if}} class="hidden-attendee"><span class="attendee-name">{{this.name}} {{t "views.event.hidden" }}</span>{{#if ../editingEnabled}} <a href="#" class="remove-attendee" data-toggle="modal" data-target="#removeAttendeeModal" title="{{t "views.event.removeuser" }}"><i class="fas fa-user-times"></i></a>{{/if}}</li>
          {{/each}}
        {{/if}}
      </ul>
      {{#unless editingEnabled}}
        {{#if numberOfHiddenAttendees}}
          <div class="hidden-attendees-message">{{plural "views.event.hiddenattendee" numberOfHiddenAttendees }}</div>
        {{/if}}
      {{/unless}}
    {{else}}
      <p class="text-center text-muted mb-0">{{t "views.event.noattendees" }}</p>
    {{/if}}
  </div>
</div>

<div class="modal fade" id="attendModal" tabindex="-1" role="dialog" aria-labelledby="attendModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="attendModalLabel">{{t "views.event.addself" }}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form id="attendEventForm" action="/attendevent/{{eventData.id}}" method="post">
    <div class="modal-body">
      <div class="form-group">
        <label for="attendeeName">{{t "views.event.attendeename" }}</label>
        <div class="form-group">
          <input type="text" class="form-control" id="attendeeName" name="attendeeName" placeholder="{{t "views.event.attendeenamedesc" }}" data-validation="required length" data-validation-length="1-30">
        </div>
      </div>
      <div class="form-group">
        <label for="attendeeName">{{t "views.event.attendeenum" }}</label>
        <div class="form-group">
          <input type="number" class="form-control" id="attendeeNumber" name="attendeeNumber" value="1" data-validation="required number" >
        </div>
      </div>
      <div class="form-group">
        <label for="attendeeEmail">{{t "views.event.attendeeemail" }}</label>
        <p class="form-text small">{{t "views.event.joinemaildesc" }}</p>
        <div class="form-group">
          <input type="email" class="form-control" id="attendeeEmail" name="attendeeEmail" placeholder="{{t "views.event.nospam" }}" data-validation="email" data-validation-optional="true">
        </div>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="attendeeVisible" name="attendeeVisible" checked>
        <label class="form-check-label" for="attendeeVisible">
          {{t "views.event.attendeevisible" }}
        </label>
        <p class="form-text small">{{t "views.event.attendeevisibledesc" }}</p>
      </div>
      <div class="form-group">
        <label for="removalPassword">{{t "views.event.removepswd" }}</label>
        <p class="form-text small">{{{t "views.event.removepswddesc" }}}</p>
        <input type="text" class="form-control" readonly id="removalPassword"
        name="removalPassword">
      </div>
    </div>
      <div class="modal-footer">
        <button type="button" class="button button--secondary" data-dismiss="modal">{{t "common.close" }}</button>
        <button type="submit" class="button button--primary">{{t "views.event.addmyself" }}</button>
      </div>
      </form>
    </div>
  </div>
</div>

<div class="modal fade" id="unattendModal" tabindex="-1" role="dialog" aria-labelledby="unattendModalLabel" aria-hidden="true" x-data="{ message: {}, password: '' }">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="unattendModalLabel">{{{t "views.event.removemyselfdesc" }}}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form id="unattendEventForm" x-on:submit.prevent="fetch(`/event/attendee/{{eventData.id}}?${new URLSearchParams({ p: password }).toString()}`, { method: 'DELETE' }).then(response => response.ok ? window.location.reload() : response.json()).then(data => message = data)">
      <div class="modal-body">
        <div class="form-group">
          <label for="removalPassword" class="form-label">{{t "views.event.removepswd" }}</label>
          <p class="form-text small">{{t "views.event.lostpswd" }}</p>
          <div x-bind:class="{ 'alert-danger': message?.error, 'alert-success': message?.success }" class="alert" x-text="message?.error || message?.success" x-show="message?.error || message?.success"></div>
          <input type="password" class="form-control" id="removalPassword" name="removalPassword" x-model="password" required>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="button button--secondary" data-dismiss="modal">{{t "common.close" }}</button>
        <button type="submit" class="button button--primary">{{t "views.event.removemyself" }}</button>
      </div>
      </form>
    </div>
  </div>
</div>
</div>
  {{#if editingEnabled}}
  <div class="modal fade" id="removeAttendeeModal" tabindex="-1" role="dialog" aria-labelledby="removeAttendeeModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="removeAttendeeModalLabel">{{{t "views.event.removeattendeedesc" }}}</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
      <form id="removeAttendeeForm" action="/removeattendee/{{eventData.id}}/" method="post">
      <div class="modal-body">
        <p>{{t "views.event.confremoveattendee" }}</p>
          </div>
        <div class="modal-footer">
          <button type="button" class="button button--secondary" data-dismiss="modal">{{t "common.close" }}</button>
          <button type="submit" class="button button--danger">{{t "views.event.removeAttendee" }}</button>
        </div>
        </form>
      </div>
    </div>
  </div>
  {{/if}}
{{/if}}


{{#if eventData.usersCanComment}}
<div class="card mb-4" id="eventComments">
  <h5 class="card-header">{{t "views.event.discussion" }}</h5>
  <div class="card-body">
    <form id="commentForm" action="/post/comment/{{eventData.id}}/" method="post">
      <label for="commentAuthor">{{t "views.event.commentauthor" }}</label>
      <div class="form-group">
        <input type="text" class="form-control" id="commentAuthor" name="commentAuthor" placeholder="{{t "views.event.commentauthorph" }}" required>
      </div>
      <label for="commentContent">{{t "views.event.comment" }}</label>
      <div class="form-group">
        <div class="d-flex flex-gap">
          <textarea class="form-control" id="commentContent" name="commentContent" style="resize: none;" placeholder="{{t "views.event.commentcontent" }}" required></textarea>
          <div class="input-group-append">
            <button type="submit" class="button button--primary" id="postComment">{{t "views.event.postbutton" }} <i class="fas fa-chevron-right"></i></button>
          </div>
        </div>
      </div>
    </form>
    {{#if eventData.comments}}
      <hr style="border-style:dashed;">
      <div class="container commentsList">
      {{#each eventData.comments}}
        <div class="comment">
          <div class="row commentContainer">
            <div class="col-lg commentText">
              {{#if this.actorId}}
                <p class="mb-0"><a href="{{this.actorId}}"><strong>{{this.author}}</strong></a> <a href="{{this.activityId}}"><small class="commentTimestamp text-muted">{{this.timestamp}}</small></a></p>
              {{else}}
                <p class="mb-0"><strong>{{this.author}}</strong> <small class="commentTimestamp text-muted">{{this.timestamp}}</small></p>
              {{/if}}
              <p>{{this.content}}</p>
              {{#if this.replies}}
                <hr>
                <div class="repliesContainer">
                  {{#each this.replies}}
                    <p class="mb-0"><strong><i class="fas fa-reply text-muted"></i> {{this.author}}</strong> <small class="commentTimestamp text-muted">{{this.timestamp}}</small></p>
                    <p>{{this.content}}</p>
                  {{/each}}
                </div>
              {{/if}}
            </div>
            <div class="col-lg-3 commentMetadata text-right">
              <button type="button" class="button button--outline button--sm openReplyBox">
                <i class="fas fa-comment"></i> {{t "views.event.reply" }}
              </button>
              {{#if ../editingEnabled}}
                <form class="d-inline" action="/deletecomment/{{../eventData.id}}/{{this._id}}/{{../eventData.editToken}}" method="post">
                  <button type="submit" class="button button--outline button--sm deleteComment">
                    <i class="fas fa-trash"></i> {{t "views.del" }}
                  </button>
                </form>
              {{/if}}
            </div>
          </div>
          <div class="row replyContainer">
            <div class="col-md">
              <form id="replyForm" action="/post/reply/{{../eventData.id}}/{{this._id}}" method="post">
                <div class="form-group">
                  <input type="text" class="form-control form-control-sm" id="replyAuthor" name="replyAuthor" placeholder="Y{{t "views.event.attendeename" }}" required>
                </div>
                <div class="form-group">
                  <div class="d-flex flex-gap">
                    <textarea class="form-control form-control-sm" id="replyContent" name="replyContent" style="resize: none;" placeholder="{{t "views.event.replycontent" }}" required></textarea>
                    <div class="input-group-append">
                    </div>
                      <button type="submit" class="button button--primary button--sm" id="postReply">{{t "views.event.reply" }} <i class="fas fa-chevron-right"></i></button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      {{/each}}
      </div>
    {{/if}}
  </div>
</div>
{{/if}}

<div class="modal fade" id="editTokenModal" tabindex="-1" role="dialog" aria-labelledby="editTokenModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editTokenModalLabel">{{t "views.edittaken" }}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form id="verifyTokenForm" action="/verifytoken/event/{{eventData.id}}" method="post">
      <div class="modal-body">
        <div class="form-group">
          <p class="form-text small">{{t "views.edittokendesc" }}</p>
          <div class="form-group">
            <input type="text" class="form-control" id="editToken" name="editToken" placeholder="{{t "views.right" }}" data-validation="required">
          </div>
          <div class="form-group">
              <div class="alert alert-danger" style="display:none;"></div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="button button--secondary" data-dismiss="modal">{{t "common.close" }}</button>
        <button type="submit" class="button button--primary">{{t "views.event.edit" }}</button>
      </div>
      </form>
    </div>
  </div>
</div>

{{#if editingEnabled}}
{{#unless eventHasConcluded}}
{{> editeventmodal }}
{{/unless}}

<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="deleteModalLabel">{{t "views.event.deletetitle" }}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form id="deleteEventForm" action="/deleteevent/{{eventData.id}}/{{eventData.editToken}}" method="post">
      <div class="modal-body">
        <p>{{t "views.event.delconfirm" }}</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="button button--secondary" data-dismiss="modal">{{t "common.close" }}</button>
        <button type="submit" class="button button--danger">{{t "views.event.del" }}</button>
      </div>
      </form>
    </div>
  </div>
</div>

{{/if}}
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script>
window.eventData = {{{ json jsonData }}};
</script>

<script>
  {{#if editingEnabled}}

  $('#removeAttendeeModal').on('show.bs.modal', function (event) {
    var listItem = $(event.relatedTarget).closest('li'); // List element enclosing button
    var attendeeName = listItem.data('attendee-name');
    var attendeeID = listItem.data('attendee-id');
    var modal = $(this);
    modal.find('.modal-title').text('Remove ' + attendeeName + ' from {{eventData.name}}')
    modal.find('#removeAttendeeForm').attr('action', '/removeattendee/{{eventData.id}}/' + attendeeID);
  })
  {{/if}}
  $(".commentTimestamp").html(function(){
    parsedDate = moment($(this).html()).fromNow();
    return parsedDate;
  });
  $(".openReplyBox").click(function(){
//    let replyID = $(this).attr("data-id");
    $(this).closest(".comment").find(".replyContainer").slideToggle();
  })
  $(document).ready(function() {
    // Save the editing token from the URL, if it is valid
    const eventID = $('#eventName').attr('data-event-id');
    const url = new URL(window.location.href);
    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.has('e')) {
      $.ajax({
        type: "POST",
        url: `/verifytoken/event/${eventID}`,
        data: { editToken: urlParams.get('e') },
        success: function(response, status, xhr) {
          if (xhr.status === 200) {
            addStoredToken(eventID, urlParams.get('e'));
          }
        },
        error: function(response, status, xhr) {
          // The editing token is wrong - remove it
          removeStoredToken(eventID);
          // Remove the token from the URL
          url.searchParams.delete('e');
          window.location = url.href;
        }
      });
    } else if (getStoredToken(eventID)) {
      const editToken = getStoredToken(eventID);
      $.ajax({
        type: "POST",
        url: `/verifytoken/event/${eventID}`,
        data: { editToken },
        success: function(response, status, xhr) {
          if (xhr.status === 200) {
            // Redirect to the same URL with the editing token in the URL
            // We reload the page to force the server to load a page with
            // the editing form accessible.
            window.location.search = `?e=${editToken}`;
          }
        },
        error: function(response, status, xhr) {
          // The editing token is wrong - remove it
          removeStoredToken(eventID);
        }
      });
    }

    if (urlParams.has('show_edit')) {
      $('#editModal').modal('show');
      url.searchParams.delete('show_edit');
      history.replaceState(history.state, '', url.href);
    }

    if (urlParams.has('m')) {
      url.searchParams.delete('m');
      history.replaceState(history.state, '', url.href);
    }

    // From https://davidwalsh.name/javascript-download
    function downloadFile(data, fileName, type="text/plain") {
      // Create an invisible A element
      const a = document.createElement("a");
      a.style.display = "none";
      document.body.appendChild(a);

      // Set the HREF to a Blob representation of the data to be downloaded
      a.href = window.URL.createObjectURL(
        new Blob([data], { type })
      );

      // Use download attribute to set set desired file name
      a.setAttribute("download", fileName);

      // Trigger the download by simulating click
      a.click();

      // Cleanup
      window.URL.revokeObjectURL(a.href);
      document.body.removeChild(a);
    }

    new ClipboardJS('#copyEventLink');
    $("#exportICS").click(function(){
      let eventID = $(this).attr('data-event-id');
      $.get('/export/event/' + eventID, function(response) {
        downloadFile(response, eventID + '.ics');
      })
    })
    $("#copyEventLink").click(function(){
      $(this).html('<i class="fas fa-copy"></i> {{t "common.copied" }}');
      setTimeout(function(){ $("#copyEventLink").html('<i class="fas fa-copy"></i> {{t "common.copy" }}');}, 5000);
    })
    new ClipboardJS('#copyAPLink');
    $("#copyAPLink").click(function(){
      $(this).html('<i class="fas fa-copy"></i> {{t "common.copied" }}');
      setTimeout(function(){ $("#copyAPLink").html('<i class="fas fa-copy"></i> {{t "common.copy" }}');}, 5000);
    })
    if ($("#joinCheckbox").is(':checked')){
      $("#maxAttendeesCheckboxContainer").css("display","flex");
    }
    $('#attendEvent').on('click', function(event) {
      const modal = $('#attendModal');
      const eventID = $(this).attr('data-event-id');
      axios.post('/attendee/provision', {}, { params: { eventID }})
        .then((response) => {
          modal.find('#removalPassword').val(response.data.removalPassword);
          // If there is a limit on the number of attendees, the provisioned endpoint will return freeSpots;
          // otherwise, freeSpots will be undefined.
          if (response.data.freeSpots !== undefined) {
            modal.find('#attendeeNumber')
              .attr('data-validation-allowing', `range[1;${response.data.freeSpots}]`)
              .attr('data-validation-error-msg', `{{t "views.event.numlimit" }}`);
          }
          modal.modal();
        })
        .catch((error) => {
          console.error(error);
          return false;
        });
    });

      $('#verifyTokenForm').on('submit', function(e) {
        e.preventDefault();
        let form = $(this);
        $.ajax({
            type: "POST",
            url: form.attr('action'),
            data: form.serialize(),
            success: function(response, status, xhr) {
                if (xhr.status === 200) {
                    // Save the token to localStorage for later
                    addStoredToken($('#eventName').attr('data-event-id'), new FormData(form[0]).get('editToken'));
                    window.location.search = `?e=${new FormData(form[0]).get('editToken')}&show_edit=true`;
                }
            },
            error: function(response, status, xhr) {
               form.find('.alert').text('{{t "views.incorrectpswd" }}').show();
            }
        });
      });

    $('#deleteEvent').on('click', function() {
        $('#editModal').modal('hide');
    })
  });

  </script>
</main>