{% extends 'keylighter.html.twig' %}
{% set current = 'about' %}

{% import _self as macros %}

{% block content %}
    <div class="snippet">
        <div class="d-flex dual">
            <div class="form-group">
                <a href="#" class="btn btn-outline-primary" id="snippet-edit">
                    <i class="{{ fa('pen') }}"></i> edit
                </a>
            </div>
            <div class="form-group">
                {% if snippet.id is empty %}
                    <a href="#" class="btn btn-primary" id="snippet-save" data-toggle="modal"
                       data-target="#save-modal">
                        <i class="{{ fa('share') }}"></i> share
                    </a>
                {% endif %}
                <a href="#" class="btn btn-outline-danger">
                    <i class="{{ fa('github', 'brand') }}"></i> open issue
                </a>
            </div>
        </div>
        <pre class="keylighter" id="snippet" data-language="{{ snippet.language }}"
             data-source="{{ snippet.code }}">{{ source|raw }}</pre>
        <aside>
            <span class="entry">
                <span class="label"><i class="{{ fa('code') }}"></i></span>
                {{ snippet.language }}
            </span>
            <span class="entry">
                <span class="label"><i class="{{ fa('clock') }}"></i></span>
                {{ (all*1000)|number_format(3) }}ms
            </span>
            <span class="entry">
                <span class="label"><i class="{{ fa('cubes', 'solid') }}"></i></span>
                {{ snippet.size|number_format }} bytes
            </span>
            <span class="entry float-right">
                {% if snippet.showcase %}
                    <strong class="text-success"><i class="{{ fa('lightbulb') }}"></i> showcase</strong>
                {% else %}
                    <strong class="text-muted"><i class="{{ fa('lock-alt') }}"></i> hidden</strong>
                {% endif %}
            </span>
        </aside>
        <section id="timing">
            <div class="progress timing">
                {{ macros.time(timing.parsing, all, 'info') }}
                {{ macros.time(timing.tokenization, all, 'primary') }}
                {{ macros.time(timing.formatting, all, 'secondary') }}
            </div>
        </section>
    </div>
{% endblock %}

{% block modals %}
    <div class="fade modal" tabindex="-1" role="dialog" id="save-modal">
        <div class="modal-dialog modal-lg" role="document">
            <form action="{{ url('snippet_save') }}" method="post">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Save your snippet</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="save-title">Title:</label>
                            <input type="text" class="form-control" id="save-title" name="title"/>
                            <small class="form-text text-muted">Title is required only if you want to share snippet in showcase.</small>
                        </div>
                        <div class="form-group">
                            <input type="hidden" value="{{ snippet.code }}" name="code"/>
                            <input type="hidden" value="{{ snippet.language }}" name="language"/>

                            <pre class="keylighter">{{ source|raw }}</pre>
                            <aside>
                                <span class="entry">
                                    <span class="label"><i class="{{ fa('code') }}"></i></span>
                                    {{ snippet.language }}
                                </span>
                            </aside>
                        </div>
                        <div class="form-group">
                            <label><input type="checkbox" name="showcase"> show that snippet in showcase gallery</label>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">cancel</button>
                        <button type="submit" class="btn btn-outline-primary"><i class="{{ fa('save') }}"></i> save</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
{% endblock %}

{% macro time(time, all, class) %}
    {% set milliseconds = time * 1000 %}
    <div class="progress-bar bg-{{ class }} has-tooltip" role="progressbar" style="width: {{ (time / all) * 100 }}%"
         aria-valuenow="{{ milliseconds|number_format(2) }}" aria-valuemin="0"
         aria-valuemax="{{ (all * 1000)|number_format(2) }}"
         title="{{ milliseconds|number_format(2) }}ms" data-placement="bottom" data-toggle="tooltip"
    >
    </div>
{% endmacro %}