{% extends "base.html" %}

{% load compress crispy_forms_tags i18n icons permissions static translations %}

{% block extra_script %}
  {% compress js %}
    <script defer
            data-cfasync="false"
            src="{% static 'js/screenshots/clipboard-paste.js' %}{{ cache_param }}"></script>
  {% endcompress %}
{% endblock extra_script %}

{% block extra_styles %}
  <link rel="stylesheet"
        href="{% static 'styles/screenshots/screenshot_detail.css' %}{{ cache_param }}" />
{% endblock extra_styles %}

{% block breadcrumbs %}
  {% path_object_breadcrumbs object.translation.component %}
  <li class="breadcrumb-item">
    <a href="{% url 'screenshots' path=object.translation.component.get_url_path %}">{% translate "Screenshots" %}</a>
  </li>
  <li class="breadcrumb-item">
    <a href="{{ object.get_absolute_url }}">{{ object.name }}</a>
  </li>
{% endblock breadcrumbs %}

{% block content %}

  {% perm 'screenshot.delete' object.translation.component as user_can_delete_screenshot %}
  {% perm 'screenshot.edit' object.translation.component as user_can_edit_screenshot %}


  <div class="card"
       id="sources-listing"
       data-href="{% url 'screenshot-js-get' pk=object.pk %}">
    <div class="card-header">
      <h4 class="card-title">{% translate "Assigned source strings" %}</h4>
    </div>
    <div id="strings-table-container">{% include "screenshots/screenshot_sources_body.html" %}</div>
    <div class="card-footer">
      {% translate "Screenshot is shown to add visual context for all listed source strings." %}
    </div>
  </div>

  {% if user_can_edit_screenshot %}
    <form id="screenshot-add-form" action="{% url 'screenshot-js-add' pk=object.pk %}">
      {% csrf_token %}
      <input type="hidden" name="source" id="add-source" />
    </form>
    <div class="card" id="search-results">
      <div class="card-header">
        <h4 class="card-title">{% translate "Assign source strings" %}</h4>
      </div>
      <div class="search-results">{% include "screenshots/screenshot_sources_search.html" %}</div>
      <div class="card-footer">
        <div class="float-end">
          <form class="form-inline">
            {% csrf_token %}
            <button data-href="{% url 'screenshot-js-ocr' pk=object.pk %}"
                    class="btn btn-warning"
                    id="screenshots-auto">{% translate "Automatically recognize" %}</button>
          </form>
        </div>
        <form class="form-inline double-submission">
          {% csrf_token %}
          <input class="textinput form-control"
                 type="text"
                 required="yes"
                 name="q"
                 id="search-input"
                 placeholder="{% translate "Source string search" %}" />
          <button data-href="{% url 'screenshot-js-search' pk=object.pk %}"
                  class="btn btn-primary"
                  id="screenshots-search">{% translate "Search" %}</button>
        </form>
      </div>
    </div>
  {% endif %}

  <div class="card">
    <div class="card-header">
      <h4 class="card-title">{% translate "Image" %}</h4>
    </div>
    <div class="card-body">{% include "screenshots/screenshot_show.html" with screenshot=object %}</div>
  </div>

  {% if user_can_edit_screenshot %}
    <form action="{{ object.get_absolute_url }}"
          method="post"
          enctype="multipart/form-data"
          id="screenshot-form-container">
      {% csrf_token %}
      <div class="card">
        <div class="card-header">
          <h4 class="card-title">{% translate "Edit screenshot" %}</h4>
        </div>
        <div class="card-body">{{ edit_form|crispy }}</div>
        <div class="card-footer">
          <input type="submit" class="btn btn-primary" value="{% translate "Save" %}" />
        </div>
      </div>
    </form>

  {% endif %}
  <div class="card">
    <div class="card-header">
      <h4 class="card-title">{% translate "Screenshot details" %}</h4>
    </div>

    <table class="table table-sm table-striped">
      <tr>
        <th>{% translate "Created" %}</th>
        <td>{{ object.timestamp|naturaltime }}</td>
      </tr>
      <tr>
        <th>{% translate "Uploaded by" %}</th>
        <td>{{ object.get_user_display }}</td>
      </tr>
      <tr>
        <th>{% translate "Language" %}</th>
        <td>{{ object.translation.language }}</td>
      </tr>
    </table>

  </div>

  {% if user_can_delete_screenshot %}
    <div class="card">
      <div class="card-header text-bg-danger">
        <h4 class="card-title">{% translate "Delete screenshot" %}</h4>
      </div>
      <div class="card-body">

        <p class="help-block">{% translate "Deleting screenshot will remove it from all associated source strings." %}</p>

        <form action="{% url 'screenshot-delete' pk=object.pk %}" method="post">
          {% csrf_token %}
          <button type="submit" class="btn btn-danger">{% translate "Delete" %}</button>
        </form>

      </div>
    </div>
  {% endif %}

{% endblock content %}