<link href="/assets/owl.carousel.min.css" rel="stylesheet">
<body>
  <!-- Sidenav -->
  <% include ../partials/sidebar %>
  <!-- Main content -->
  <div class="main-content">
    <!-- Top navbar -->
    <% include ../partials/navbar %>
    <!-- Header -->
    <% include ../partials/material/header %>
    <!-- Page content -->
    <div class="container-fluid mt--7">
        <div class="col-12 mb-5">
          <div class="card card-profile shadow">
            <div class="card-header text-center border-0 pt-8 pt-md-4 pb-0 pb-md-4">
              <div class="text-center">
                <h2>
                    <%= locals.Title %>
                </h3>
                <% 
                  var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; 
                  var date  = new Date(Presented);
                %>
                <small class="font-weight-light"><strong><%= locals.Name %></strong> <%= date.toLocaleDateString("id-ID", options) %></small>
                <hr class="my-4" />
              </div>
              <p class="text-left" style="text-indent: 2em;"><%= Description %></p>
            </div>
          </div>
        </div>

        <div class="col-12 mb-5">
          <div class="card bg-secondary shadow">
            <div class="card-header bg-white border-0">
              <div class="row align-items-center">
                <div class="col-8">
                  <h3 class="mb-0">File Materi :</h3>
                </div>
              </div>
            </div>
            <div class="card-body">
              <ul>
                <% for(var i=0; i<Attachments.data.length; i++) {%>
                    <li><a target="_blank" href="<%= Attachments.data[i].attributes.url %>" download="<%= Attachments.data[i].attributes.name %>"><%= Attachments.data[i].attributes.name %></a></li>
                <% } %>
              </ul>
            </div>
          </div>
        </div>

        <div class="col-12 mb-5">
          <div class="card bg-secondary shadow">
            <div class="card-header bg-white border-0">
              <div class="row align-items-center">
                <div class="col-8">
                  <h3 class="mb-0">Peserta : <a href="#" class="openParticipants" value="<%= locals.id %>"><small> <%= participants.data.length %> peserta</small></a></h3> 
                </div>
              </div>
            </div>
            <div class="card-body">
              <div class="table-responsive">
                <table id="participantsTable" class="table align-items-center table-flush">
                  <thead class="thead-light">
                    <tr>
                      <th scope="col">No</th>
                      <th scope="col">Name</th>
                      <th scope="col">Company</th>
                      <th scope="col">Division</th>
                      <th scope="col">Email</th>
                    </tr>
                  </thead>
                  <tbody>
                    <% for(var i=0; i<((participants.data.length>9)?9:participants.data.length); i++) {%>
                      <tr>
                        <th scope="row"><%= i+1 %></th>
                        <td><%= participants.data[i].attributes.Name %></td>
                        <td><%= participants.data[i].attributes.Company %></td>
                        <td><%= participants.data[i].attributes.Division %></td>
                        <td><%= participants.data[i].attributes.Email %></td>
                      </tr>
                    <% } %>
                  </tbody>
                </table>
             </div>
            </div>
          </div>
        </div>

        <div class="col mb-5">
          <div class="card bg-secondary shadow">
            <div class="card-header bg-white border-0">
              <div class="row align-items-center">
                <div class="col-8">
                  <h3 class="mb-0">Kegiatan : <small> <%= Images.data?Images.data.length:0 %> gambar</small></h3> 
                </div>
              </div>
            </div>
            <div class="card-body">
              <div class="owl-carousel owl-theme">
                <% for(var i=0; i<(Images.data?Images.data.length:0); i++) {%>
                  <div class="item">
                    <img src="<%= Images.data[i].attributes.url %>">
                  </div>
                <% }  %>
              </div>
            </div>
          </div>
        </div>
    </div>
  </div>
  
  <% include ../partials/dashboard/modal_participants %>

  <!-- Include scripts -->
  <% include ../partials/scripts %>
  <script src="/vendor/owl-carousel/owl.carousel.min.js"></script>
  <script>
    $('.owl-carousel').owlCarousel({
      items:1,
      margin:10,
      autoHeight:true
    })
  </script>
</body>
