{% extends 'base/layout.html' %}

{% block title %}Running config{% endblock %}

{% block content %}

<div class="d-flex justify-content-between align-items-center mb-3">
    <h1 class="h3 mb-0">
        <i class="mdi mdi-console text-warning"></i> Running configuration
    </h1>
    <div class="text-muted">
        {% if message.repo_state.commits_count %}
        <i class="mdi mdi-source-branch"></i>
        <strong>{{ message.repo_state.commits_count }}</strong> change(s) since
        {{ message.repo_state.first_commit_date }}.
        Last change: <span class="text-success">{{ message.repo_state.last_commit_date }}</span>
        {% endif %}
    </div>
</div>

{% if message.repo_state.error %}
<div class="alert alert-warning">
    <i class="mdi mdi-alert"></i> Git error: {{ message.repo_state.error }}
</div>
{% endif %}

<div class="row">
    {# -- Running config ------------------------------------------------- #}
    <div class="col-md-8">
        <div class="card mb-3">
            <div class="card-header"><strong>Running configuration</strong></div>
            <div class="card-body p-0">
                {% if message.status %}
                <pre class="mb-0 p-3"><code>{{ message.running_config }}</code></pre>
                {% else %}
                <div class="alert alert-danger m-3">
                    <i class="mdi mdi-alert-circle"></i> {{ message.comment }}
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    {# -- Git diffs ------------------------------------------------------ #}
    <div class="col-md-4">
        <div class="card">
            <div class="card-header"><strong>Change history</strong></div>
            <div class="card-body p-2">
                {% for commit in message.repo_state.commits reversed %}
                <div class="card mb-2 border-secondary">
                    <div class="card-header py-1 px-2 d-flex justify-content-between">
                        <small class="text-success">{{ commit.date|date:"Y-m-d H:i" }}</small>
                        <small class="text-muted font-monospace">{{ commit.hash|slice:":8" }}</small>
                    </div>
                    {% if commit.diff %}
                    {% if commit.diff|length > 1000 %}
                    <div class="card-body py-1 px-2">
                        <button type="button" class="btn btn-link btn-sm p-0" data-bs-toggle="collapse"
                            data-bs-target="#diff-{{ commit.hash }}">
                            Show / hide diff
                        </button>
                    </div>
                    <div id="diff-{{ commit.hash }}" class="collapse">
                        <pre class="mb-0 p-2 text-info"><samp>{{ commit.diff }}</samp></pre>
                    </div>
                    {% else %}
                    <pre class="mb-0 p-2 text-info"><samp>{{ commit.diff }}</samp></pre>
                    {% endif %}
                    {% else %}
                    <div class="card-body py-1 px-2 text-muted"><small>no diff</small></div>
                    {% endif %}
                </div>
                {% empty %}
                <p class="text-muted">No commits found for this file.</p>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

{% endblock %}