<div class="row">
    <div class="col-12">
        <h1 class="h4 mb-3">{{ title }}</h1>
        <div id="toolbar" class="d-flex flex-wrap toolbar mb-3">
            <button type="button" class="btn btn-success btn-sm" onclick="subtitles.upload()">
                <em class="fas fa-upload mr-2"></em>Upload
            </button>
            <button type="button" class="btn btn-danger btn-sm btn-hidden d-none" onclick="subtitles.delete.multi()" title="Delete">
                <em class="fas fa-trash-alt mr-2"></em>Delete
            </button>
            <button type="button" class="btn btn-info btn-sm" onclick="subtitles.reload()">
                <em class="fas fa-sync-alt mr-2"></em>Reload
            </button>
           {% if is_admin %}
                <button type="button" class="btn btn-warning btn-sm" onclick="subtitles.migrate()">
                    <em class="fas fa-sync-alt mr-2"></em>Migrate
                </button>
            {% endif %}
        </div>
        <table id="tbSubtitles" class="table table-striped table-bordered table-hover table-sm m-0" style="width:100%">
            <thead>
                <tr>
                    <th scope="col">
                        <div class="custom-control custom-checkbox mx-auto">
                            <input type="checkbox" class="custom-control-input" id="ckAllSubtitles">
                            <label class="custom-control-label" for="ckAllSubtitles"></label>
                        </div>
                    </th>
                    <th scope="col">File Name</th>
                    <th scope="col">Language</th>
                    <th scope="col">User</th>
                    <th scope="col">Host</th>
                    <th scope="col">Added</th>
                    <th scope="col">Updated</th>
                    <th scope="col">Actions</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th scope="col">
                        <div class="custom-control custom-checkbox mx-auto">
                            <input type="checkbox" class="custom-control-input" id="ckAllSubtitles1">
                            <label class="custom-control-label" for="ckAllSubtitles1"></label>
                        </div>
                    </th>
                    <th scope="col">File Name</th>
                    <th scope="col">Language</th>
                    <th scope="col">User</th>
                    <th scope="col">Host</th>
                    <th scope="col">Added</th>
                    <th scope="col">Updated</th>
                    <th scope="col">Actions</th>
                </tr>
            </tfoot>
        </table>
    </div>
</div>
<div class="modal fade" id="mdUploadSubtitle" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="mdUploadSubtitleLabel">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <form id="frmUploadSubtitle" method="POST" enctype="multipart/form-data" class="needs-validation" novalidate>
                <div class="modal-header">
                    <h5 class="modal-title" id="mdUploadSubtitleLabel">Upload Subtitle</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <select id="uploadSubLang" name="uploadSubLang" class="form-control">
                            {% for val in subtitles %}
                                <option value="{{ val }}">{{ val }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="form-group m-0">
                        <div class="custom-file">
                            <input type="file" name="uploadSubFile" id="uploadSubFile" class="custom-file-input form-control" accept=".srt, .vtt, .ass, .sub, .stl, .dfxp, .ttml, .sbv, .txt" required>
                            <label class="custom-file-label" for="uploadSubFile">Choose file</label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="hidden" name="action" id="action" value="upload_subtitle">
                    <button type="submit" class="btn btn-success">
                        <em class="fas fa-upload mr-2"></em>Upload
                    </button>
                    <button type="reset" class="btn btn-danger" data-dismiss="modal">
                        <em class="fas fa-times mr-2"></em>Close
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" id="modalHostSub" tabindex="-1" role="dialog" aria-labelledby="modalHostSubLabel" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <form method="POST" id="frmMigrateSub" class="needs-validation" novalidate>
                <div class="modal-header">
                    <h5 class="modal-title" id="modalHostSubLabel">Subtitle Migration</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="oldLocation">Old Location</label>
                        <select id="oldLocation" name="oldLocation" class="form-control" required></select>
                    </div>
                    <div class="form-group">
                        <label for="newLocation">New Location</label>
                        <input type="url" name="newLocation" id="newLocation" class="form-control" placeholder="Example: {{ base_url }}" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-warning">
                        <em class="fas fa-sync-alt mr-2"></em>Migrate
                    </button>
                    <button type="reset" class="btn btn-danger" data-dismiss="modal">
                        <em class="fas fa-times mr-2"></em>Close
                    </button>
                    <input type="hidden" name="action" value="migrate">
                </div>
            </form>
        </div>
    </div>
</div>
