{% extends "skeleton.html" %}
{% block page_title %}Blobstore Viewer{% endblock %}

{% block page_head %}
  <script>{% include "blobstore_viewer.js" %}</script>
  <style type="text/css">{% include "blobstore_viewer.css" %}</style>
{% endblock %}

{% block body %}
<div>
  <h3><a href="{{ return_to }}">Blobstore Viewer</a></h3>
  <div>
    <div class="ae-settings-block">
      <label>Key</label>
      <div>{{ blob_info.key() }}</div>
    </div>

    <div class="ae-settings-block">
      <label>MD5</label>
      <div>{{ blob_info.md5_hash }}</div>
    </div>

    <div class="ae-settings-block">
      <label>Content Type</label>
      <div>{{ blob_info.content_type }}</div>
    </div>

    <div class="ae-settings-block">
      <label>Filename</label>
      <div>{{ blob_info.filename }}</div>
    </div>

    <div class="ae-settings-block">
      <label>Size</label>
      <div>{{ blob_info.size|bytesizeformat }}</div>
    </div>

    <div class="ae-settings-block">
      <label>Created</label>
      <div>{{ blob_info.creation }}</div>
    </div>
  </div>

  <form action="{{ delete_uri }}" method="post">
    <input type="hidden" name="xsrf_token" value="{{ xsrf_token }}">
    <input type="hidden" name="return_to" value="{{ return_to }}">
    <input type="hidden" name="blob_key" value="{{ blob_info.key() }}">
    <p>
      <button type="submit" data-action="delete"
              class="ae-button">Delete</button>
      <a href="{{ download_uri }}" class="ae-button">Download</a>
    </p>
  </form>

  <div id="inlined_content">
    {% if inlineable %}
      <iframe src="{{ inline_uri }}" class="inlined-content"></iframe>
    {% else %}
      <p>
        The blob doesn't have a content type that can be displayed inline.
        If you believe your browser can display this content inlined,
        click on the button below.
      </p>
      <p>
        <a href="#" id="display_inline" class="ae-button"
           data-content-uri="{{ inline_uri }}">
          Try to display inline
        </a>
      </p>
    {% endif %}
  </div>
</div>
{% endblock %}
