{% extends "layout.html" %}
{% block content %}
<div class="container">
    <!-- Upload controls -->
    <div class="row sticky-top">
        <div class="col">
            <div class="row controls-secondary">
                <div class="col">
                    <button class="btn btn-info" data-toggle="modal"
                        data-target="#uploaderModal">Upload...</button>
                </div>
                <div class="col">
                    <button id="googlePicker" class="btn btn-success">GDrive</button>
                </div>
                <div class="col">
                    <button id="notesToViewBtn" class="btn btn-secondary">Notes</button>
                </div>
                <div class="col">
                    <button id="filesToViewBtn" class="btn btn-secondary">Files</button>
                </div>
            </div>

            <div class="row">
                <div class="col">
                    <!-- Message zone -->
                    <div id="page-alert-zone"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Google Drive Picker -->
    <div class="row">
        <div id="result"></div>
    </div>

    <!-- Upload(ed) List -->
        <div class="row-fluid">
            <h3 style="display: inline-block">Server Files:</h3>
            <div class="col" style="max-height:35em; overflow-y:scroll;">
                <!-- Uploadeed Files List -->
                <ul class="list-group">
                    <span id="notesToView"></span>
                    {% for note in notes %}
                    <li class="row rtext t{{ loop.index }}">
                        <div class="col-sm-2 list-group-item text-center">
                            <p class="server-file-card text-left">
                            <img class="menu-item" src="{{ url_for('static', filename='imgs/octicons/trashcan.svg')}}" title="Delete..."
                                alt="Delete" data-toggle="modal" data-target="#deleteDialogModalText"
                                onclick="preDeleteText(this.parentElement.parentElement.parentElement)" />
                            </p>
                        </div>

                        <div class="col-md-10 list-group-item">
                        {% if "youtu.be" in note.strip().lower() or "www.youtube.com/watch?v=" in note.strip().lower() %}
                            {% if "youtu.be" in note.strip() %}
                                <span class="list-group-item list-group-item-action justify-content-center text-center">
                                    {{note}}
                                    <iframe
                                        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                                        autoplay="" allowfullscreen="true" width="650px" height="400px" frameborder="0"
                                        src="{{note | replace('youtu.be/', 'www.youtube.com/embed/')}}">
                                    </iframe>
                                </span>
                            {% elif "www.youtube.com/watch?v=" in note.strip().lower() %}
                                <span class="list-group-item list-group-item-action justify-content-center text-center">
                                    {{note}}
                                    <iframe
                                        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                                        autoplay="" allowfullscreen="true" width="650px" height="400px" frameborder="0"
                                        src="{{note | replace('www.youtube.com/watch?v=', 'www.youtube.com/embed/')}}">
                                    </iframe>
                                </span>
                            {% endif %}
                        {% elif note.strip().startswith( ("http:", "https:", "ftp:", "file:") ) %}
                            {% if note.strip().endswith( (".jpg", ".jpeg", ".png", ".gif") ) %}
                                <div class="list-group-item list-group-item-action justify-content-center text-center">
                                    <a href="{{note}}" target="_blank">
                                        {{note}}
                                    </a>
                                    <img src="{{note}}" width="650px" height="auto" />
                                </div>
                            {% else %}
                                <a class="list-group-item list-group-item-action" href="{{note}}" target="_blank">
                                    {{note}}
                                </a>
                            {% endif %}
                        {% elif note.strip() %}
                            <span class="list-group-item list-group-item-action">{{note}}</span>
                        {% endif %}
                        </div>
                    </li>
                    {% endfor %}

                    <span id="filesToView"></span>
                    {% for file in files %}
                    <li class="row r{{ loop.index }}">
                        <div class="col list-group-item text-center">
                            <p class="server-file-card text-right" fileName="{{file[0]}}" fileHash="{{file[1]}}">
                                <span class="file-name" style="float:left;">{{file[0]}}</span>
                                <img class="menu-item" src="{{ url_for('static', filename='imgs/octicons/pencil.svg')}}" title="Edit..."
                                    alt="Edit" data-toggle="modal" data-target="#editDialogModal"
                                    onclick="preEditFile(this.parentElement)" />
                                <img class="menu-item" src="{{ url_for('static', filename='imgs/octicons/trashcan.svg')}}" title="Delete..."
                                    alt="Delete" data-toggle="modal" data-target="#deleteDialogModal"
                                    onclick="preDeleteFile(this.parentElement)" />
                            </p>
                            {% if file[0].lower().endswith( (".png", ".jpg", ".jpeg") ) %}
                                <a class="list-group-item-action content-align-center" href="{{ url_for('uploads')}}/{{file[0]}}" target="_blank">
                                    <img class="server-image" src="{{ url_for('uploads')}}/{{file[0]}}" alt="{{file[0]}}" />
                                </a>
                            {% elif file[0].lower().endswith( (".mp4", ".webm") ) %}
                                <video src="{{ url_for('uploads')}}/{{file[0]}}" controls></video>
                            {% else %}
                                <a class="list-group-item list-group-item-action" href="{{ url_for('uploads')}}/{{file[0]}}" target="_blank">{{file[0]}}</a>
                            {% endif %}
                        </div>
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
</div>


<!-- Modals -->

<!-- Uploader modal -->
<div id="uploaderModal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Uploader</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="modal-body">
          <div class="row">
              <!-- Text Upload -->
              <div class="col-md-6 controls-secondary">
                  <textarea id="noteArea" rows="4" cols="80" placeholder="Enter note..."
                          style="background-color: #32383e; color: #fff; width: 100%;
                                    height: 320px; margin-bottom: 1em;"></textarea>
                  <button id="uploadText" class="btn btn-success">Submit Note...</button>

              </div>

              <!-- File Upload -->
              <div class="col-md-6 controls-secondary">
                  <!-- To Upload List -->
                  <ul id="uploadListTitles" class="list-group scroller" style="min-height: 286px; max-height: 286px; overflow: auto;">
                  </ul>
                  <input class="btn btn-primary" type="file" id="toUpload" multiple>
                  <button id="uploadFiles" class="btn btn-success">Submit Files...</button>
              </div>
          </div>

          <!-- Server Messages -->
          <div id="page-alert-zone-2"></div>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- Delete modal text -->
<div id="deleteDialogModalText" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Delete Text</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p id="toDeleteText">...</p>
      </div>
      <div class="modal-footer">
        <button id="deleteTextBtn" textClass="" type="button" class="btn btn-danger" data-dismiss="modal">Delete</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- Delete modal file -->
<div id="deleteDialogModal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Delete File</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p id="toDeleteFileName">...</p>
      </div>
      <div class="modal-footer">
        <button id="deleteFileBtn" fileHash="" type="button" class="btn btn-danger" data-dismiss="modal" onclick="deleteFile(this)">Delete</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- Edit Modal -->
<div id="editDialogModal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Edit File</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p id="toEditFileName">...</p>
      </div>
      <input type="text" id="newEditName" placeholder="New File Name..." value="">
      <div class="modal-footer">
        <button id="editFileBtn" fileHash="" type="button"
            class="btn btn-warning" onclick="editFile(this)">Edit</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

{% endblock content %}

{% block scripts %}
    <!-- Created scripts -->
    <script src="{{ url_for('static', filename='js/post-ajax.js')}}"></script>
    <script src="{{ url_for('static', filename='js/ajax.js')}}"></script>
    <script src="{{ url_for('static', filename='js/ui-logic.js')}}"></script>
    <script src="{{ url_for('static', filename='js/google-picker-logic.js')}}"></script>
    <script src="{{ url_for('static', filename='js/events.js')}}"></script>

    <!-- The Google API Loader script. -->
    <script type="text/javascript" src="https://apis.google.com/js/api.js?onload=loadPicker"></script>
{% endblock scripts %}