{% extends 'base.html' %}
{% load humanize %}
{% load static %}

{% block content %}


    <div id="view_playlist">
        <br>
    {% if playlist.is_user_owned %}

        <div class="table-responsive" id="videos-div">

            <div id="settings-status-div" class="text-dark">

            </div>

              <div class="card bg-dark text-white mb-3">
                <div class="card-body">
                    <div id="settings-form">

                    <div class="row">
                    <div class="col-sm-3">
                      <h6 class="mb-0">Playlist Name</h6>
                    </div>
                    <div class="col-sm-9 text-white-50">
                        <input type="text" class="form-control" name="playlistTitle" value="{{ playlist.name }}" aria-describedby="plTitleHelp">
                        <div id="plTitleHelp" class="form-text">Maximum of 150 characters. Make sure the title does not contain '>' or '<'. They will be replaced by 'greater than' or 'less than' if found.</div>
                    </div>
                  </div>
                    <hr>

                      <div class="row">
                        <div class="col-sm-3">
                          <h6 class="mb-0">Created By</h6>
                        </div>
                        <div class="col-sm-9 text-white-50">
                            <input type="text" class="form-control" id="fullname" value="{{ playlist.channel_name }}" disabled>
                        </div>
                      </div>
                      <hr>
                      <div class="row">
                          <div class="col-sm-3">
                            <h6 class="mb-0">Playlist Description</h6>
                          </div>

                            <div class="col-sm-9 text-white-50">
                                <textarea class="form-control form-text" name="playlistDesc" rows="6" placeholder="Enter a playlist description here!" aria-describedby="plDescHelp">{{ playlist.description }}</textarea>
                                <div id="plDescHelp" class="form-text">Maximum of 5000 characters. Make sure the description does not contain '>' or '<'. They will be replaced by 'greater than' or 'less than' if found.</div>
                            </div>
                        </div>
                      <hr>
                    <div class="row">
                      <div class="col-sm-3">
                          <h6 class="mb-0">Playlist Privacy</h6>
                        </div>
                        <div class="col-sm-9 text-white-50">
                            <select  class="form-select w-25" name="playlistPrivacy">
                                  <option value="Public" {% if not playlist.is_private_on_yt %}selected{% endif %}>Public</option>
                                  <option value="Private" {% if playlist.is_private_on_yt %}selected{% endif %}>Private</option>
                            </select>
                        </div>
                        </div>
                      <hr>
                    <div class="row">
                        <div class="col-sm-3">
                            <h6 class="mb-0">Preferences</h6>
                        </div>
                        <div class="col-sm-9 text-white">

                            <div class="mb-3 form-check form-switch">
                            <input class="form-check-input" name="hide videos" type="checkbox" id="flexSwitchCheckChecked" {% if playlist.hide_unavailable_videos %}checked{% endif %}>
                            <label class="form-check-label" for="flexSwitchCheckChecked">Hide deleted/private videos</label>
                            </div>


                            <div class="mb-3 form-check form-switch">
                            <input class="form-check-input" name="confirm before deleting" type="checkbox" id="flexSwitchCheckChecked" {% if playlist.confirm_before_deleting %}checked{% endif %}>
                            <label class="form-check-label" for="flexSwitchCheckChecked">Confirm before deleting</label>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-sm-3">
                          <h6 class="mb-0">Danger Zone</h6>
                        </div>
                        <div class="col-sm-9 text-white-50">
                            <button type="button" class="btn btn-outline-danger">Delete Playlist From YouTube</button>
                        </div>
                      </div>

                </div>
                </div>
              </div>

            <div class="d-flex justify-content-center">
                <div class="btn-group">
                    <a href="{% url 'playlist' playlist.playlist_id %}" class="btn btn-secondary me-2">Back</a>

                    <button href="#navbar" hx-post="{% url 'update_playlist_settings' playlist.playlist_id %}" hx-include="[id='settings-form']" hx-target="#settings-status-div"
                            type="button" class="btn btn-success me-2">Save</button>
                </div>
              </div>
        </div>

    {% else %}
        <div class="table-responsive" id="videos-div">

            <div id="settings-status-div" class="text-dark">

            </div>

              <div class="card bg-dark text-white mb-3">
                <div class="card-body">
                    <div id="settings-form">

                    <div class="row">
                    <div class="col-sm-3">
                      <h6 class="mb-0">Playlist Name on YouTube</h6>
                    </div>
                    <div class="col-sm-9 text-white-50">
                        <input type="text" class="form-control" name="username" id="username" value="{{ playlist.name }}" disabled>
                    </div>
                  </div>
                    <hr>

                    <div class="row">
                    <div class="col-sm-3">
                      <h6 class="mb-0">Playlist User Label</h6>
                    </div>
                    <div class="col-sm-9 text-white-50">
                        <input type="text" class="form-control" name="user_label" id="user_label" placeholder="Enter a personal label you want to identify this playlist with" value="{{ playlist.user_label }}">
                    </div>
                  </div>
                      <hr>
                      <div class="row">
                        <div class="col-sm-3">
                          <h6 class="mb-0">Created By</h6>
                        </div>
                        <div class="col-sm-9 text-white-50">
                            <input type="text" class="form-control" id="fullname" value="{{ playlist.channel_name }}" disabled>
                        </div>
                      </div>
                      <hr>
                        <div class="row">
                        <div class="col-sm-3">
                            <h6 class="mb-0">Preferences</h6>
                        </div>
                        <div class="col-sm-9 text-white">

                            <div class="mb-3 form-check form-switch">
                            <input class="form-check-input" name="hide videos" type="checkbox" id="flexSwitchCheckChecked" checked>
                            <label class="form-check-label" for="flexSwitchCheckChecked">Hide deleted/private videos</label>
                            </div>


                            <div class="mb-3 form-check form-switch">
                            <input class="form-check-input" name="confirm before deleting" type="checkbox" id="flexSwitchCheckChecked" checked>
                            <label class="form-check-label" for="flexSwitchCheckChecked">Confirm before deleting</label>
                            </div>
                        </div>
                    </div>

                        <hr>
                      <div class="row">
                        <div class="col-sm-3">
                          <h6 class="mb-0">Danger Zone</h6>
                        </div>
                        <div class="col-sm-9 text-white-50">
                            <a href="{% url 'delete_playlist' playlist.playlist_id %}" class="btn btn-outline-danger">Remove Playlist From UnTube</a>
                        </div>
                      </div>

                </div>
                </div>
              </div>

            <div class="d-flex justify-content-center">
                            <div class="btn-group">
                <a href="{% url 'playlist' playlist.playlist_id %}" class="btn btn-secondary me-2">Back</a>

                <button href="#navbar" hx-post="{% url 'update_playlist_settings' playlist.playlist_id %}" hx-include="[id='settings-form']" hx-target="#settings-status-div"
                            type="button" class="btn btn-success me-2">Save</button>
                                </div>
              </div>
        </div>
    {% endif %}


    </div>
{% endblock %}