<?php
/** @var App\Entity\Station $station */

$this->layout('minimal', [
    'page_class' => 'embed station-'.$station->getShortName(),
    'title' => $this->e($station->getName()),
    'hide_footer' => true
]);

/** @var \App\Assets $assets */
$assets->load('bootgrid');
?>

<table class="data-table table table-striped" id="requests-table">
    <thead>
    <tr>
        <th data-column-id="song_id" data-identifier="true" data-visible="false" data-visible-in-selection="false">ID</th>
        <th data-column-id="song_title"><?=__('Title') ?></th>
        <th data-column-id="song_artist"><?=__('Artist') ?></th>
        <th data-column-id="song_album" data-visible="false"><?=__('Album') ?></th>
        <th data-column-id="commands" data-formatter="commands" data-sortable="false"><?=__('Actions') ?></th>
    </tr>
    </thead>
    <tbody></tbody>
</table>

<script type="text/javascript" nonce="<?=$assets->getCspNonce() ?>">
$(function() {
    var grid = $("#requests-table").bootgrid({
        ajax: true,
        rowSelect: false,
        caseSensitive: false,
        css: {
            icon: 'zmdi icon',
            iconColumns: 'zmdi-view-module',
            iconDown: 'zmdi-sort-amount-desc',
            iconRefresh: 'zmdi-refresh',
            iconUp: 'zmdi-sort-amount-asc'
        },
        url: "<?=$router->named('api:requests:list', ['station' => $station->getId()]) ?>",
        formatters: {
            "commands": function(column, row) {
                return '<a class="btn btn-request btn-sm btn-primary" data-url="'+row.request_url+'"><?=__('Request') ?></a>';
            }
        }
    }).on("loaded.rs.jquery.bootgrid", function()
    {
        /* Executes after data is loaded and rendered */
        grid.find(".btn-request").on("click", function(e)
        {
            e.preventDefault();

            $.ajax({
                dataType: "json",
                url: $(this).data('url')
            }).done(function(data) {
                notify(data, 'success');
            }).fail(function(jqXhr) {
                notify('Error: ' + jqXhr.responseJSON, 'danger');
            });

            return false;
        });
    });
});
</script>
