{% extends "_layout.html" %}

{%- import '_utils.html' as utils -%}

{% block content %}
<div class="card">
    <div class="card-header">
        <h1>
            {{ item.meta['filename'] }}
        </h1>
        <div class="btn-group flex-wrap flex-md-nowrap" role="group">
            {% if not item.meta['locked'] or may(ADMIN) %}
                <a id="qr-btn" href="{{ url_for('bepasty.qr', name=name) }}" class="btn btn-info">
                    <span class="fa fa-qrcode"></span> QR
                </a>
                <a id="download-btn" href="{{ url_for('bepasty.download', name=name) }}" class="btn btn-info" role="button">
                    <span class="fa fa-download"></span> Download
                </a>
                <a id="inline-btn" href="{{ url_for('bepasty.inline', name=name) }}" class="btn btn-info" role="button">
                    <span class="fa fa-asterisk"></span> Inline
                </a>
            {% endif %}
            {% if may(MODIFY) %}
                <div id="hidden-modify-frm" class="d-none" modalTitle="Modify Metadata" modalFocus="filename">
                    <!-- modify form that used by utils.js -->
                    <form id="modify-frm" action="{{ url_for('bepasty.modify', name=name) }}" method="post">
                        <div class="form-group row">
                            <label for="filename" class="col-2 form-label">Filename</label>
                            <div class="col-10">
                                {{ utils.input_filename(item.meta['filename']) }}
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="contenttype" class="col-2 form-label">Type</label>
                            <div class="col-10">
                                {{ utils.input_contenttype(item.meta['type']) }}
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary d-none">Submit</button>
                    </form>
                </div>
                <button id="modify-btn" type="button" class="btn btn-info">
                    <span class="fa fa-edit"></span> Modify
                </button>
            {% endif %}
            {% if may(DELETE) %}
                <form id="del-frm" action="{{ url_for('bepasty.delete', name=name) }}" method="post" class="btn-group">
                    <input type="hidden" name="next" value="{{ url_for('bepasty.index') }}">
                    <button id="del-btn" type="button" class="btn btn-danger">
                        <span class="fa fa-remove"></span> Delete
                    </button>
                </form>
            {% endif %}
            {% if may(ADMIN) %}
            {% if not item.meta['locked'] %}
                <form id="lock-frm" action="{{ url_for('bepasty.lock', name=name) }}" method="post" class="btn-group">
                    <button id="lock-btn" type="submit" class="btn btn-danger">
                        <span class="fa fa-lock"></span> Lock
                    </button>
                </form>
            {% else %}
                <form id="unlock-frm" action="{{ url_for('bepasty.unlock', name=name) }}" method="post" class="btn-group">
                    <button id="unlock-btn" type="submit" class="btn btn-info">
                        <span class="fa fa-unlock"></span> Unlock
                    </button>
                </form>
            {% endif %}
            {% endif %}
        </div>
    </div>
    <div class="card-body">
        <p>
        Type: {{ item.meta['type'] }},
        Size: {{ item.meta['size'] }} bytes,
        SHA256: <code>{{ item.meta['hash'] }}</code>.
        <br/>
        UTC timestamps:
        upload: {{ item.meta['timestamp-upload'] | datetime }},
        download: {{ item.meta['timestamp-download'] | datetime }},
        {% if item.meta['timestamp-max-life'] > 0 %}
        max lifetime: {{ item.meta['timestamp-max-life'] | datetime }}.
        {% else %}
        max lifetime: forever.
        {% endif %}
        </p>
        <div class="data">
            {{ rendered_content }}
        </div>
    </div>
</div>
{% endblock content %}

{% block extra_link %}
<!-- Pygments styles -->
<link rel="stylesheet" href="{{ url_for('bepasty.xstatic', name='pygments', filename='css/colorful.css') }}" type="text/css">
<!-- asciinema styles -->
<link rel="stylesheet" href="{{ url_for('bepasty.xstatic', name='asciinema_player', filename='asciinema-player.css') }}" type="text/css">
{% endblock %}

{% block extra_script %}
<script src="{{ url_for('bepasty.xstatic', name='bootbox', filename='bootbox.min.js') }}" type="text/javascript"></script>
<script src="{{ url_for('bepasty.xstatic', name='asciinema_player', filename='asciinema-player.js') }}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='app/js/utils.js') }}" type="text/javascript"></script>
{% if may(MODIFY) %}
<script>
    <!-- function that used by utils.js -->
    function contenttype_autocomplete(modal_box) {
        {{ utils.contenttype_autocomplete('$(modal_box).find("#contenttype")', contenttypes) }}
    };
</script>
{% endif %}
{% endblock extra_script %}
