{% extends "base.html" %}

{% block title %}Recordings{% endblock %}
{% block content %}
<div class="container">
  <h1>Recordings</h1>

  {% if recording_dates | length == 0 %}
    <div class="alert alert-warning" role="alert">
      No recordings so far. The recordings will be displayed here once the camera detects any motion.
    </div>
  {% endif %}

  <div class="accordion" id="accordion_recording_dates">
    {% for recording_date in recording_dates %}
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ recording_date }}" aria-expanded="true" aria-controls="collapseOne">
            {{ format_date(recording_date).capitalize() }} ({{ recordings[recording_date] | length }} recordings)
          </button>
        </h2>
        <div id="collapse{{ recording_date }}" class="accordion-collapse collapse recording_date_section" data-bs-parent="#accordion_recording_dates" data-date="{{ recording_date }}">
          <div class="accordion-body">
            <div class="d-flex align-content-start flex-wrap">
              {% for recording in recordings[recording_date] %}
                <a data-bs-toggle="modal" data-bs-target="#recording_video_modal">
                  <div class="recording_card card m-2" style="width: 18rem;"
                      data-camera-id="{{ recording["camera_id"] }}"
                      data-time="{{ recording["time"] }}"
                      data-tags="{{ recording.get("tags") }}">
                    <img src="{{ url_for('recordings.preview', camera_id = recording["camera_id"], date = recording_date, time = recording["time"]) }}" class="card-img-top">
                    <div class="card-body">
                      <p class="card-text">
                        {{ format_time(recording["time"]) }}
                        {{ format_duration(recording["duration"]) }}
                      </p>
                    </div>
                  </div>
                </a>
              {% endfor %}
            </div>
          </div>
        </div>
      </div>
    {% endfor %}
  </div>
</div>

<!-- Modal to show the video recording -->
<div class="modal fade" id="recording_video_modal" tabindex="-1" aria-labelledby="modalTitle" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="modalTitle">Video title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <video controls>
          <source id="video_source" src="" type="video/mp4">
          Your browser does not support the video tag.
        </video>
        <div>
          Detected objects: <span id="tags" class="m-0 border-0"></span>
        </div>
      </div>
      <div class="modal-footer">
        <a id="download_link" class="btn btn-primary" href="" download>Download</a>
        <a id="share_link" class="btn btn-primary" href="">
          <!-- The SVG icon was taken from: https://icons.getbootstrap.com/icons/share/ -->
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-share" viewBox="0 0 16 16">
            <path d="M13.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3M11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.5 2.5 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5m-8.5 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3m11 5.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3"/>
          </svg>
          Share
        </a>
        <a id="delete_link" class="btn btn-danger" href="">
          <!-- The SVG icon was taken from: https://icons.getbootstrap.com/icons/trash/ -->
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
            <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"/>
            <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"/>
          </svg>
          Delete
        </a>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

{% endblock %}
