{{#if eventGroupHasCoverImage}}
  <div id="eventImageContainer" style="background-image: url(/events/{{eventGroupData.image}});"></div>
{{else}}
  <div id="genericEventImageContainer" style="background-image: url(/images/seigaiha.png);"></div>
{{/if}}
<div class="row">
  <div class="col-lg">
    <h3 id="eventName">{{eventGroupData.name}}</h3>
  </div>
  {{#if editingEnabled}}
  <div class="col-lg-2 ml-2 edit-buttons">
    <div class="btn-group" role="group" aria-label="Event controls">
      <button type="button" id="editEvent" class="btn btn-success" data-toggle="modal" data-target="#editModal" ><i class="fas fa-edit"></i></button>
      <button type="button" id="deleteEvent" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal"><i class="fas fa-trash"></i></button>
    </div>
  </div>
  {{/if}}
</div>
{{#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>
  Welcome to your event group! We've just sent you an email with your secret editing link, which you can also see in the address bar above. Haven't got the email? Check your spam or junk folder. To share your event group, use the link you can see just below this message - that way your attendees won't be able to edit or delete your event group!
</div>
{{/if}}
<div class="card mt-4 mb-4">
  <div class="card-body">
    <ul class="fa-ul eventInformation">
      {{#if eventGroupHasHost}}
        <li>
          <span class="fa-li">
            <i class="fas fa-fw fa-user-circle"></i>
          </span>
          <span class="text-muted">Hosted by</span> {{eventGroupData.hostName}}
        </li>
      {{/if}}
      {{#if eventGroupData.url}}
        <li>
          <span class="fa-li">
            <i class="fas fa-link"></i>
          </span>
          <a href="{{eventGroupData.url}}">
            {{eventGroupData.url}}
          </a>
        </li>
      {{/if}}
      <li>
        <span class="fa-li">
          <i class="fas fa-share-square"></i>
        </span>
        <a href="https://{{domain}}/group/{{eventGroupData.id}}">
          {{domain}}/group/{{eventGroupData.id}}
        </a>
        <button type="button" id="copyEventLink" class="eventInformationAction btn btn-outline-secondary btn-sm" data-clipboard-text="https://{{domain}}/group/{{eventGroupData.id}}">
          <i class="fas fa-copy"></i> Copy
        </button>
      </li>
    </ul>
  </div>
</div>

{{#if editingEnabled}}
  <div class="alert alert-success">
    <p>To add an event to this group, copy and paste the two codes below into the 'Event Group' box when creating a new event or editing an existing event.</p>
    <div class="table-responsive">
      <table style="width:100%">
        <tr style="border-bottom:1px solid rgba(0,0,0,0.2)">
          <td><strong>Event group ID</strong></td>
          <td><span class="code">{{eventGroupData.id}}</span></td>
        </tr>
        <tr>
          <td><strong>Event group secret editing code</strong></td>
          <td><span class="code">{{eventGroupData.editToken}}</span></td>
        </tr>
      </table>
    </div>
    
  </div>
{{/if}}

<div class="card mb-4" id="eventDescription">
    <h5 class="card-header">About</h5>  
  <div class="card-body">
    {{{parsedDescription}}}
  </div>
</div>
<div class="card mt-4 mb-4" id="upcomingEvents">
  <h5 class="card-header">Upcoming events</h5>
  <div class="list-group list-group-flush">
  {{#if upcomingEventsExist}}
    {{#each events}}
      {{#unless this.eventHasConcluded}}
        <a href="/{{this.id}}" class="list-group-item list-group-item-action" target="_blank">
          <i class="fas fa-fw fa-calendar-day"></i>
          <strong>{{this.name}}</strong>
          <span class="ml-2 text-muted">{{this.displayDate}}</span>
        </a>
      {{/unless}}
    {{/each}}
  {{else}}
      <div class="list-group-item">No events!</div>
  {{/if}}
  </div>
</div>

{{#if editingEnabled}}
{{> editeventgroupmodal }}

<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">Delete '{{eventGroupData.name}}'</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form action="/deleteeventgroup/{{eventGroupData.id}}/{{eventGroupData.editToken}}" method="post">
      <div class="modal-body">
        <p>Are you sure you want to delete this event group? This action cannot be undone.</p>
        <p>This will <strong>not</strong> delete the individual events contained in this group. They can be linked to another group later.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-danger">Delete event group</button>
      </div>
      </form>
    </div>
  </div>
</div>

{{/if}}

<script>
  $.validate({
    lang: 'en',
    errorElementClass: "is-invalid",
    errorMessageClass: "text-danger",
    successElementClass: "is-valid"
  });

  $(document).ready(function() {
    $.uploadPreview({
      input_field: "#eventGroupImageUpload",
      preview_box: "#eventGroupImagePreview",
      label_field: "#eventGroupImageLabel",
      label_default: "Choose file",
      label_selected: "Change file",
      no_label: false
    });
    $("#eventGroupImagePreview").css("background-image", "url('/events/{{eventGroupData.image}}')");
    $("#eventGroupImagePreview").css("background-size", "cover");
    $("#eventGroupImagePreview").css("background-position", "center center");
    new ClipboardJS('#copyEventLink');
    autosize($('textarea'));
    $("#copyEventLink").click(function(){
      $(this).html('<i class="fas fa-copy"></i> Copied!');
      setTimeout(function(){ $("#copyEventLink").html('<i class="fas fa-copy"></i> Copy');}, 5000);
    })
  });
</script>