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

{% block title %}{{ plugin.name }} Added{% endblock %}

{% block breadcrumbs %}
<li class="breadcrumb-item">
    <a href="{% url 'plugins:netbox_catalog:catalog_list' %}">Plugin Catalog</a>
</li>
<li class="breadcrumb-item">
    <a href="{% url 'plugins:netbox_catalog:plugin_detail' name=plugin.name %}">{{ plugin.name }}</a>
</li>
<li class="breadcrumb-item active">{% if install_method == "requirements" %}Added{% else %}Installed{% endif %}</li>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-8 offset-md-2">
        <div class="card">
            <div class="card-header bg-success text-white">
                <h4 class="mb-0">
                    <i class="mdi mdi-check-circle"></i>
                    {% if install_method == "requirements" %}
                    Added {{ plugin.name }} to Requirements
                    {% else %}
                    Successfully Installed {{ plugin.name }}
                    {% endif %}
                </h4>
            </div>
            <div class="card-body">
                {% if install_method == "requirements" %}
                <!-- Docker installation via requirements file -->
                <div class="alert alert-warning">
                    <h5><i class="mdi mdi-alert"></i> Container Restart Required</h5>
                    <p class="mb-0">The package has been added to <code>requirements-extra.txt</code>. You need to restart the NetBox container to install and activate it.</p>
                </div>

                <h5>Step 1: Edit configuration/plugins.py</h5>
                <p>Add the plugin to your plugins configuration:</p>
                <pre class="bg-dark text-light p-3 rounded"><code>{{ config_snippet }}</code></pre>

                <h5>Step 2: Restart the Container</h5>
                <p>Restart the NetBox container to install the package and load the plugin:</p>
                <pre class="bg-dark text-light p-3 rounded"><code>cd /path/to/netbox-docker
docker-compose down && docker-compose up -d</code></pre>
                <p class="text-muted small">The container will automatically install packages from requirements-extra.txt on startup, run migrations, and collect static files.</p>

                {% else %}
                <!-- Traditional pip installation -->
                <div class="alert alert-warning">
                    <h5><i class="mdi mdi-alert"></i> Action Required</h5>
                    <p class="mb-0">The package has been installed via pip, but you need to complete the following steps to activate it.</p>
                </div>

                <h5>Step 1: Edit configuration.py</h5>
                <p>Add the following to your NetBox configuration file:</p>
                <pre class="bg-dark text-light p-3 rounded"><code>{{ config_snippet }}</code></pre>

                <h5>Step 2: Run Migrations</h5>
                <p>Execute the following command to apply any database changes:</p>
                <pre class="bg-dark text-light p-3 rounded"><code>{{ commands.migrate }}</code></pre>

                <h5>Step 3: Collect Static Files</h5>
                <p>Execute the following command to collect plugin static assets:</p>
                <pre class="bg-dark text-light p-3 rounded"><code>{{ commands.collectstatic }}</code></pre>

                <h5>Step 4: Restart NetBox</h5>
                <p>Restart your NetBox service to load the plugin:</p>
                <pre class="bg-dark text-light p-3 rounded"><code># Docker Compose
{{ commands.restart_docker }}

# Systemd
{{ commands.restart_systemd }}</code></pre>
                {% endif %}

                <div class="mt-4 d-flex justify-content-between">
                    <a href="{% url 'plugins:netbox_catalog:catalog_list' %}" class="btn btn-outline-secondary">
                        <i class="mdi mdi-arrow-left"></i> Back to Catalog
                    </a>
                    <a href="{% url 'plugins:netbox_catalog:plugin_detail' name=plugin.name %}" class="btn btn-primary">
                        View Plugin Details
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}