{% extends "plugins/admin/views/partials/base.html" %}

{% block content %}

<form method="post" id="form" class="form-inline form-upload" enctype="multipart/form-data" action="{{ path_for('admin.entries.uploadMediaFileProcess') }}">
    {{ csrf() }}
    <input type="hidden" name="entry-id" value="{{ id }}">
    <div class="input-group">
      <div class="custom-file">
        <input id="file" name="file" type="file" class="custom-file-input" id="inputGroupFile" aria-describedby="inputGroupFileAddon">
        <label class="custom-file-label" data-browse="{{ tr('admin_browse_files') }}" for="inputGroupFileAddon"></label>
      </div>
      <div class="input-group-append">
          <input type="submit" id="upload_file" name="upload_file" value="{{ tr('admin_upload') }}" class="btn btn-outline-secondary">
      </div>
    </div>
</form>

<br>

<div class="media-manager">
    <div class="row">
        {% for file in files %}
            <div class="col-sm-2">
                <div class="item">
                    <a href="javascript:;"
                       {% if (filesystem_ext(file) in ['jpeg', 'png', 'gif', 'jpg']) %}
                       style="background-image: url('{{ base_url() }}/image/{{ id }}/{{ filesystem_basename(file) }}?w=200');"
                       {% else %}
                       style="background: #000;"
                       {% endif %}
                       class="img-item js-entries-image-preview"
                       data-media-id="{{ filesystem_basename(file) }}"
                       data-entry-id="{{ id }}"
                       data-image-url="{{ base_url() }}/image/{{ id }}/{{ filesystem_basename(file) }}">
                       <i class="fas fa-eye"></i>
                       {% if (filesystem_ext(file) in ['jpeg', 'png', 'gif', 'jpg']) %}
                       {% else %}
                       <span class="file-ext">{{ filesystem_ext(file) }}</span>
                       {% endif %}
                    </a>

                </div>
            </div>
        {% endfor %}
    </div>
</div>

<div class="modal animated fadeIn faster image-preview-modal" id="entriesImagePreview" tabindex="-1" role="dialog" aria-labelledby="entriesImagePreviewLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="entriesImagePreviewLabel">{{ tr('admin_preview') }}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body js-entry-image-preview-placeholder image-preview"></div>
      <div class="modal-footer">
          <input type="text" name="" class="form-control js-entry-image-url-placeholder" value="">
          <form id="delete-media-file" action="{{ path_for('admin.entries.deleteMediaFileProcess') }}" method="POST" style="display: none;">
              {{ csrf() }}
              <input type="hidden" name="media-id" class="js-media-id" value="">
              <input type="hidden" name="entry-id" class="js-entry-id" value="">
          </form>
          <a class="btn btn-primary" href="javascript:;"
             onclick="event.preventDefault();
                      document.getElementById('delete-media-file').submit();">{{ tr('admin_delete') }}</a>

      </div>
    </div>
  </div>
</div>
{% endblock %}