<div class="row">
    <div class="col-12">
        <h1 class="h4 mb-3">{{ page_title }}</h1>
        <form action="{{ admin_dir }}/videos/edit/?id={{ id }}" method="post" enctype="multipart/form-data" class="needs-validation" novalidate>
            <div class="row">
                <div class="col-12 col-lg-6">
                    <div class="form-group">
                        <label for="title">Video Title</label>
                        <input type="text" name="title" id="title" value="{{ title }}" class="form-control" placeholder="Insert video title here" required>
                    </div>
                    <div class="form-group">
                        <label for="host_id">Main Video URL</label>
                        <div class="input-group">
                            {% if host %}
                                <div class="input-group-prepend">
                                    <div class="input-group-text">
                                        <img src="{{ base_url }}assets/img/logo/{{ host }}.png" alt="{{ supported_sites[host]|replace({'|New':'','|Additional Host':''}) }}" width="16" height="16">
                                    </div>
                                </div>
                            {% endif %}
                            <input type="url" id="host_id" name="host_id" class="form-control" placeholder="Insert main video url here" value="{{ main_url }}" required>
                            <div class="input-group-append">
                                <button type="button" class="btn btn-info" onclick="videos.scrollToHosts()" data-toggle="tooltip" title="Example Link">
                                    <em class="fas fa-info-circle"></em>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Alternative Video URLs</label>
                        <p>
                            <button type="button" class="btn btn-custom" onclick="videos.alternatives.add()" data-toggle="tooltip" title="Add Alternative Video URL">
                                <em class="fas fa-plus mr-2"></em>Add
                            </button>
                        </p>
                        <div id="altWrapper">
                            {% for i, val in alternatives %}
                                {% set title = supported_sites[val.host]|replace({'|New':'','|Additional Host':''}) %}
                                <div class="form-group" data-index="{{ i }}">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text">
                                                <img src="{{ base_url }}assets/img/logo/{{ val.host }}.png" data-toggle="tooltip" title="{{ title }}" alt="{{ title }}" width="16" height="16">
                                            </div>
                                        </div>
                                        <input type="url" id="altLink-{{ i }}" name="altLinks[]" class="form-control" placeholder="Insert alternative video url here" value="{{ val.link }}">
                                        <div class="input-group-append">
                                            <button type="button" data-toggle="tooltip" title="Remove Alternative Video URL" class="btn btn-danger" onclick="videos.alternatives.remove({{ i }})">
                                                <em class="fas fa-minus"></em>
                                            </button>
                                            <a href="javascript:void(0)" role="button" data-toggle="tooltip" title="Move" class="btn btn-outline-secondary move">
                                                <em class="fas fa-expand-arrows-alt"></em>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Subtitles</label>
                        <p>
                            <button type="button" class="btn btn-custom" onclick="videos.subtitles.add()" data-toggle="tooltip" title="Add Subtitle File/URL">
                                <em class="fas fa-plus mr-2"></em>Add
                            </button>
                        </p>
                        <div id="subsWrapper"></div>
                        <small class="form-text text-muted"><strong class="text-success">Subtitle formats:</strong> .srt, .vtt, .ass, .sub, .stl, .dfxp, .ttml, .sbv, .txt</small>
                        <small class="form-text text-muted"><strong class="text-success">New:</strong> You can find the subtitle file that you uploaded earlier through the Subtitle URL field by typing the file name.</small>
                    </div>
                    {% if subtitle %}
                        <div class="form-group">
                            <ul id="subtitles" class="list-group list-group-flush">
                                {% for val in subtitle %}
                                    <li class="list-group-item p-2" data-sub="{{ val.id }}">
                                        <input type="hidden" name="subs[]" value="{{ val.id }}">
                                        <div class="float-left">
                                            <a href="{{ val.link }}" target="_blank">{{ val.language }}</a>
                                        </div>
                                        <div class="float-right">
                                            <a href="javascript:void(0)" class="ml-3 text-primary" data-toggle="tooltip" title="Edit Subtitle" onclick="videos.subtitles.edit({{ val.id }}, '{{ val.language }}', '{{ val.link }}')">
                                                <em class="fas fa-pencil"></em>
                                            </a>
                                            <a href="javascript:void(0)" class="ml-3 text-danger" data-toggle="tooltip" title="Remove Subtitle" onclick="videos.subtitles.delete({{ val.id }}, '{{ val.language }}')">
                                                <em class="fas fa-trash-alt"></em>
                                            </a>
                                        </div>
                                    </li>
                                {% endfor %}
                            </ul>
                            <small class="form-text text-muted">Reorder subtitles by drag and drop.</small>
                        </div>
                    {% endif %}
                </div>
                <div class="col-12 col-lg-6">
                    <div class="form-group">
                        <label for="slug">Custom Slug</label>
                        <input type="text" name="slug" id="slug" value="{{ slug }}" class="form-control" placeholder="Insert custom slug here" maxlength="50">
                    </div>
                    <div class="form-group">
                        <label for="poster">Poster</label>
                        <div id="posterURL" class="input-group">
                            <input type="url" id="poster" name="poster-url" class="form-control" placeholder="Poster Link">
                            <div class="input-group-append">
                                <button type="button" class="btn btn-primary btn-upload-poster" data-toggle="tooltip" title="Upload Poster">
                                    <em class="fas fa-upload"></em>
                                </button>
                            </div>
                        </div>
                        <div id="posterUpload" class="input-group d-none">
                            <div class="custom-file">
                                <input type="file" id="poster" name="poster-file" class="custom-file-input form-control" accept="image/jpeg, image/png, image/webp, image/gif">
                                <label class="custom-file-label" for="poster">Choose file</label>
                            </div>
                            <div class="input-group-append">
                                <button type="button" class="btn btn-primary btn-upload-poster" data-toggle="tooltip" title="Insert Poster Link">
                                    <em class="fas fa-link"></em>
                                </button>
                            </div>
                        </div>
                        <small class="form-text text-muted">Poster formats: .jpg, .jpeg, .png, .webp, .gif</small>
                    </div>
                    {% if poster %}
                        <div class="form-group">
                            <a href="{{ poster_url }}" target="_blank" rel="noopener" title="Poster Image">
                                <img src="{{ poster_url }}" class="img-thumbnail w-100 mb-2" alt="Poster Image">
                            </a>
                            <a href="javascript:void(0)" class="btn btn-danger" onclick="videos.removePoster({{ id }}, $(this))" rel="noopener">
                                <em class="fas fa-trash-alt mr-2"></em>Remove
                            </a>
                        </div>
                    {% endif %}
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <input type="hidden" name="id" value="{{ id }}">
                    <button type="submit" class="btn btn-success">
                        <em class="fas fa-save mr-2"></em>Update
                    </button>
                    &nbsp;
                    <button type="button" class="btn btn-danger" onclick="videos.cache.clear.single($(this))" data-id="{{ id }}">
                        <em class="fas fa-eraser mr-2"></em>Clear Cache
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
<div class="row mt-3">
    <div class="col-12">
        <ul class="nav nav-pills nav-justified mb-3" role="tablist" aria-owns="url-tab embed-tab dl-tab req-tab json-tab">
            <li class="nav-item">
                <a role="tab" class="nav-link active" id="url-tab" data-toggle="tab" href="#turl" aria-controls="turl">Embed Link</a>
            </li>
            <li class="nav-item">
                <a role="tab" class="nav-link" id="embed-tab" data-toggle="tab" href="#tembed" aria-controls="tembed">Embed Code</a>
            </li>
            <li class="nav-item">
                <a role="tab" class="nav-link" id="dl-tab" data-toggle="tab" href="#tdl" aria-controls="tdl">Download Link</a>
            </li>
            <li class="nav-item">
                <a role="tab" class="nav-link" id="req-tab" data-toggle="tab" href="#treq" aria-controls="treq">Request Link</a>
            </li>
        </ul>
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="turl" role="tabpanel" aria-labelledby="url-tab">
                <label for="txtEmbed">Embed Link</label>
                <textarea onfocus="this.select()" id="txtEmbed" cols="30" rows="6" class="form-control" readonly>{{ embed_url }}</textarea>
            </div>
            <div class="tab-pane fade" id="tembed" role="tabpanel" aria-labelledby="embed-tab">
                <label for="txtEmbedCode">Embed Code</label>
                <textarea onfocus="this.select()" id="txtEmbedCode" cols="30" rows="6" class="form-control" readonly>{{ embed_code }}</textarea>
            </div>
            <div class="tab-pane fade" id="tdl" role="tabpanel" aria-labelledby="dl-tab">
                <label for="txtDl">Download Link</label>
                <textarea onfocus="this.select()" id="txtDl" cols="30" rows="6" class="form-control" readonly>{{ download_url }}</textarea>
            </div>
            <div class="tab-pane fade" id="treq" role="tabpanel" aria-labelledby="req-tab">
                <label for="txtReq">Request Link</label>
                <textarea onfocus="this.select()" id="txtReq" cols="30" rows="6" class="form-control" readonly>{{ request_url }}</textarea>
            </div>
        </div>
    </div>
</div>
<div class="row mt-3">
    <div class="col-12">
        <div class="card border-primary">
            <div class="card-header border-0 bg-primary py-2 px-3">
                <div class="d-flex align-items-center">
                    <h6 class="mb-0 flex-grow-1 text-white mr-2"><em class="fab fa-google-drive mr-2"></em>Google Drive Backup Links</h6>
                    <a class="btn btn-outline-light btn-sm" data-toggle="collapse" href="#collapseGdrive" role="button" aria-expanded="false" aria-controls="collapseGdrive">Show/Hide</a>
                </div>
            </div>
            <div class="card-body collapse p-0" id="collapseGdrive">
                <ul class="list-group list-group-flush rounded-bottom">
                    {% if gdrive_files %}
                        {% for val in gdrive_files %}
                            <li class="list-group-item list-group-item-action p-2">
                                <a href="{{ val.url }}" target="_blank" rel="noopener" class="float-left">{{ val.mirror_id }}</a>
                                {% if is_admin %}
                                    <a href="javascript:void(0)" onclick="videos.gdrive_files.delete($(this))" data-id="{{ val.id }}" data-name="{{ val.mirror_id }}" class="float-right text-danger ml-2" data-toggle="tooltip" title="Delete"><em class="fas fa-trash"></em></a>
                                {% endif %}
                            </li>
                        {% endfor %}
                    {% else %}
                        <li class="list-group-item">Not found backup links</li>
                    {% endif %}
                </ul>
            </div>
        </div>
        <script>
            $(document).ready(function() {
                var clGDrive = localStorage.getItem('collapseGdrive');
                clGDrive = clGDrive !== null ? clGDrive.replace('true', 'show') : 'hide';
                $('#collapseGdrive').collapse(clGDrive);
                $('#collapseGdrive').on('shown.bs.collapse', function() {
                    localStorage.setItem('collapseGdrive', 'show');
                }).on('hidden.bs.collapse', function() {
                    localStorage.setItem('collapseGdrive', 'hide');
                });
            });
        </script>
    </div>
</div>
<div class="modal fade" id="mdEditSubtitle" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="mdEditSubtitleLabel">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <form id="frmEditSubtitle" method="POST" enctype="multipart/form-data" class="needs-validation" novalidate>
                <div class="modal-header">
                    <h5 class="modal-title" id="mdEditSubtitleLabel">Edit 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="editSubLang" name="editSubLang" class="form-control">
                            {% for val in subtitle_list %}
                                <option value="{{ val }}">{{ val }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div id="fgEditSubURL" class="form-group m-0">
                        <div class="input-group">
                            <input type="url" name="editSubURL" id="editSubURL" class="form-control subtitle" placeholder="Subtitle URL" required>
                            <div class="input-group-append">
                                <button onclick="$('#editSubType').val('file');$('#fgEditSubURL').toggleClass('d-none');$('#editSubURL').removeAttr('required');$('#fgEditSubFile').toggleClass('d-none');$('#editSubFile').attr('required','').val('')" type="button" class="btn btn-primary" data-toggle="tooltip" title="Upload Subtitle">
                                    <em class="fas fa-upload"></em>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div id="fgEditSubFile" class="form-group m-0 d-none">
                        <div class="input-group">
                            <div class="custom-file">
                                <input type="file" name="editSubFile" id="editSubFile" class="custom-file-input form-control" placeholder="Choose file" accept=".srt, .vtt, .ass, .sub, .stl, .dfxp, .ttml, .sbv, .txt">
                                <label class="custom-file-label" for="editSubFile">Choose file</label>
                            </div>
                            <div class="input-group-append">
                                <button onclick="$('#editSubType').val('url');$('#fgEditSubURL').toggleClass('d-none');$('#editSubURL').attr('required','').val('');$('#fgEditSubFile').toggleClass('d-none');$('#editSubFile').removeAttr('required')" type="button" class="btn btn-primary" data-toggle="tooltip" title="Insert Subtitle URL">
                                    <em class="fas fa-link"></em>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success">
                        <em class="fas fa-save mr-2"></em>Update
                    </button>
                    &nbsp;
                    <button type="reset" class="btn btn-danger" data-dismiss="modal">
                        <em class="fas fa-times mr-2"></em>Close
                    </button>
                    <input type="hidden" name="editSubId" id="editSubId">
                    <input type="hidden" name="action" id="action" value="edit_subtitle">
                    <input type="hidden" name="editSubType" id="editSubType" value="url">
                </div>
            </form>
        </div>
    </div>
</div>
