% if data:
<div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-remove"></i></button>
            <h4 class="modal-title" id="myModalLabel">
                <strong><span id="modal_header_ip_address">
                    % if data.get('media_type'):
                    <% h = {'episode': 'TV Show', 'track': 'Music', 'live': 'Live TV'} %>
                    <i class="fa fa-history"></i> ${h.get(data['media_type'], data['media_type'].title())} History for <span id="date-header">${data['start_date']}</span>
                    % elif data.get('transcode_decision'):
                    <% h = {'copy': 'Direct Stream'} %>
                    <i class="fa fa-history"></i> ${h.get(data['transcode_decision'], data['transcode_decision'].title())} History for <span id="date-header">${data['start_date']}</span>
                    % else:
                    <i class="fa fa-history"></i> History for <span id="date-header">${data['start_date']}</span>
                    % endif
                </span></strong>
            </h4>
        </div>
        <div class="modal-body" id="modal-text">
            <table class="display history_table" id="history_table_modal" width="100%">
                <thead>
                <tr>
                    <th align="left" id="delete_row">Delete</th>
                    <th align="left" id="date">Date</th>
                    <th align="left" id="friendly_name">User</th>
                    <th align="left" id="ip_address">IP Address</th>
                    <th align="left" id="platform">Platform</th>
                    <th align="left" id="product">Product</th>
                    <th align="left" id="device">Player</th>
                    <th align="left" id="title">Title</th>
                    <th align="left" id="started">Started</th>
                    <th align="left" id="paused_counter">Paused</th>
                    <th align="left" id="stopped">Stopped</th>
                    <th align="left" id="duration">Duration</th>
                    <th align="left" id="percent_complete"></th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
        <div class="modal-footer"></div>
    </div>
</div>

<script src="${http_root}js/tables/history_table.js${cache_param}"></script>
<script>
    $(document).ready(function() {
        $('#date-header').html(moment('${data["start_date"]}','YYYY-MM-DD').format('ddd MMM Do YYYY'));
        history_table_options.ajax = {
            url: 'get_history',
            data: function ( d ) {
                return {
                    json_data: JSON.stringify(d),
                    user_id: "${data['user_id']}",
                    start_date: "${data['start_date']}",
                    media_type: "${data.get('media_type') or 'all'}",
                    transcode_decision: "${data.get('transcode_decision')}"
                };
            }
        };

        history_table = $('#history_table_modal').DataTable(history_table_options);
        history_table.columns([0, 3, 4, 5, 9, 11, 12]).visible(false);

        clearSearchButton('history_table_modal', history_table);

        $('#history-modal').on('shown.bs.modal', function() {
            history_table.columns.adjust().draw();
        });
    });
</script>
% else:
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-remove"></i></button>
            <h4 class="modal-title">
                <strong><i class="fa fa-history"></i> History</strong>
            </h4>
        </div>
        <div class="modal-body">
            <h3>No data.</h3>
        </div>
        <div class="modal-footer"></div>
    </div>
</div>
% endif