{% extends '@TigrisBase/admin/layout.html.twig' %}

{% block title %}{{ '.icon-terminal'|parse_icons }} {{ command.name }}{% endblock %}
{% block main %}
<command-console name="{{ command.name }}" v-slot="{args, execute, output, reset, loading, updateArgs}">
    <div class="mb-3">
        <div class="input-group">
            <span class="input-group-text">{{ command.name }}</span>
            <input type="text" v-model="args" @input="e => updateArgs(e.target.value)" name="args" placeholder="{{ 'ui_command.arguments'|trans }}" class="form-control">
            <button type="button" class="btn-outline-secondary btn btn-light" @click.prevent="execute" :disabled="loading">{{ 'ui_command.run'|trans }}</button>
        </div>
    </div>
    <div class="card command-output">
        <div class="card-header hstack">
            <div>
                {{ 'ui_command.output'|trans }}
                <div class="spinner-border spinner-border-sm" role="status" v-show="loading">
                    <span class="visually-hidden">Loading...</span>
                </div>
            </div>
            <button type="button" class="btn ms-auto btn-sm" @click.prevent="reset" title="{{ 'ui_command.reset'|trans }}">
                {{ '.icon-eraser'|parse_icons }}
            </button>
        </div>
        <div class="card-body bg-black text-light output" v-html="output">
        </div>
    </div>
</command-console>
{% endblock %}