{#
  SPDX-FileCopyrightText: 2015-2019 CERN.
  SPDX-License-Identifier: MIT
#}

{# Creates the bottom for embed and base previews #}

{%- from "invenio_previewer/macros.html" import preview_file %}


{# Modal for embed code, hidden unless called upon #}
<div id="embedModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="embedModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3 id="embedModalLabel">{{_('Embed code')}}</h3>
  </div>
  <div class="modal-body">
    <textarea style="width:90%;height:100px;">
    {% autoescape on %}
      {{ preview_file(file) }}
    {% endautoescape %}
    </textarea>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">{{_('Close')}}</button>
  </div>
</div>

<!-- Styling the wrapper and bottom -->
<style type="text/css">
  html,
  body {
    height: 100%;
  }
  #wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -60px;
  }
  #push,
  #bottom {
    height: 60px;
  }
  #bottom {
    background-color: #f5f5f5;
  }
  @media (max-width: 767px) {
    #bottom {
      margin-left: -20px;
      margin-right: -20px;
      padding-left: 20px;
      padding-right: 20px;
    }
  }
</style>


{# Add div to push down bottom if necessary #}
<script>
  $('#wrap').append('<div id="push"></div>');
</script>

{# Bottom: determines whether to have view or embed button
# based on embed flag #}
<div id="bottom">
  <div class="container row">
    <div class="span5 offset1"><h3>{{_('Previewing')}}: {{ file.filename }}</h3></div>
    <div class="span3">
      <a role="button" class="btn btn-inverse" data-toggle="modal" href="#embedModal">{{_('Embed')}}&nbsp;&nbsp<i class="icon-share icon-white"></i></a>
      <a role="button" class="btn btn-inverse" href="{{ file.uri }}">{{_('Download')}}&nbsp;&nbsp<i class="icon-download icon-white"></i></a>
    </div>
  </div>
</div>