{% extends "base.html" %}
{% block content %}
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.21.3/dist/bootstrap-table.min.css">
<script src="https://unpkg.com/bootstrap-table@1.21.3/dist/bootstrap-table.min.js"></script>

<style>
.card-body .form-control {
    color: #b1b1b1;
    background-color: #171717;
    border: 1px solid #515151;
    margin-bottom: 20px;
}
.fixed-table-pagination {display: none !important;}
</style>

<!-- Page Content -->
<div class="container">

  <div class="row mb-5">
    <div class="col-lg-12">

      <div class="card">
        <div class="card-header">
          <h5 class="mb-0">Request song</h5>
        </div>
        <div class="card-body">
          <p style="color: #626262 !important;">Note: Requesting a song can take a minute or two before it starts playing.</p>
          <table
            id="songsTable"
            data-side-pagination="server"
            data-classes="table"
            data-pagination="true"
            data-toggle="table"
            data-flat="true"
            data-page-size="150"
            data-search="true"
            data-url="{{url_for('api_songs')}}">
            <thead>
              <tr>
                <th data-formatter="btnMaker" data-sortable="false"></th>
                <th data-field="title" data-sortable="false">Name</th>
                <th data-field="karma" data-sortable="true">Karma</th>
                <th data-field="added_by" data-sortable="false">User</th>
                <th data-formatter="utubeMaker" data-field="utube_id" data-sortable="false"></th>
              </tr>
            </thead>
          </table>
        </div>
      </div>
    </div>
  </div>
  <script>
    function utubeMaker(value, row, index) {
      return `<a target="_blank" href="https://youtube.com/watch?v=${row.uid}">${row.uid}</a>`;
    }

    function btnMaker(value, row, index) {
      return `<span class="btnRequest" style="cursor:pointer;color:#82b2e5;" data-uid="${row.uid}">request</span>`;
    }

    $(document).ready(() => {
      $(document).on('click', '.btnRequest', async (ev) => {
        let sel = $(ev.currentTarget);
        let uid = sel.attr('data-uid');

        let url = "{{ url_for('api_request', utube_id='') }}" + uid;

        fetch(url).then((response) => {
          if (response.ok) {
            return response.json();
          }
          throw new Error('Something went wrong');
        })
        .then((responseJson) => {
          sel.text('added');
        })
        .catch((error) => {
          alert(error);
        });

      });
    });
  </script>
  {% include 'footer.html' %}
</div>

{% endblock %}