<!DOCTYPE html>
<html lang="en">

<head>

  <%- include("partials/head.ejs") %>


</head>

<body>

  <%- include("partials/header.ejs") %>  

  <div class="card-body p-5">
    <h4>SOCIAL LINKS</h4>
    <p>Get social with GFN</p>
    <div class="table-responsive">
      <table id="gameslist" class="table table-striped table-bordered display responsive" style="width:100%">
        <thead>
          <tr>
            <!-- <th>GFN Id</th> -->
            <th data-priority="1" style="width:25%">Title</th>
            <th data-priority="2"style="width:15%">Site</th>
            <th data-priority="3" style="width:15%">Twitter</th>
            <th data-priority="4" style="width:15%">Facebook</th>
            <th data-priority="5" style="width:15%">Twitch</th>
            <th data-priority="6" style="width:15%">Youtube</th>
          </tr>
        </thead>
      </table>
    </div>
  </div>

  <script type="text/javascript">
    $(document).ready(function() {
      $('#gameslist').DataTable({
        "ajax": "data/social.json",
        "responsive":true,
        "searching": true,
        "pageLength": 10,
        columnDefs: [
          { responsivePriority: 1, targets: 0 },
          { responsivePriority: 2, targets: 1 },
          { responsivePriority: 3, targets: 2 },
          { responsivePriority: 4, targets: 3 },
          { responsivePriority: 5, targets: 4 },
        ],
        "columns": [/*{
          "data": "ID"
        }, */{
          "data": "NAME"
        }, {
          "data": "OFFICIAL"
        }, {
          "data": "TWITTER"
        }, {
          "data": "FACEBOOK"
        }, {
          "data": "TWITCH"
        }, {
          "data": "YOUTUBE"
        }]
      });
    });
  </script>

  <script src="vendor/dark-mode-switch.min.js"></script>

  <%- include("partials/analytics.ejs") %>

</body>

</html>
