<div class="guide">
    <h2>How to use this page</h2>
    <p>
        This page lets you manage the plugins of the AiiDAlab Quantum ESPRESSO app.
        Below, you will find all available plugins from the
        <a href="https://github.com/aiidalab/aiidalab-qe/blob/main/plugins.yaml" target="_blank"
            style="background-color: #ffdd57; padding: 2px 5px; border-radius: 4px; font-weight: bold; text-decoration: none;">
            official AiiDAlab Quantum ESPRESSO plugin registry
        </a>.
    </p>
    <p>
        If you install a new plugin, you may need to <strong>refresh the calculation page</strong>
        for the newly installed functionality to appear.
    </p>
    <p>
        If you are developing a new plugin and would like to share it with the community,
        <a href="https://aiidalab-qe.readthedocs.io/development/plugin_registry.html" target="_blank"
            style="background-color: #ffdd57; padding: 2px 5px; border-radius: 4px; font-weight: bold; text-decoration: none;">
            click here
        </a>
        to learn how to register it in the official plugin registry.
    </p>
    <p>
        You can install and uninstall plugins directly from this page.
    </p>

    <h3 style="margin-top: 20px;">Plugin status explanation</h3>
    <p>Each plugin has a <strong>status badge</strong> indicating its development stage:</p>

    <table style="width: 100%; border-collapse: collapse; margin-top: 10px;">
        <thead>
            <tr style="background-color: #f4f4f4;">
                <th style="border: 1px solid #ddd; padding: 8px; text-align: left;">Status</th>
                <th style="border: 1px solid #ddd; padding: 8px; text-align: left;">Meaning</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="border: 1px solid #ddd; padding: 8px;">🟠 <strong>Experimental</strong></td>
                <td style="border: 1px solid #ddd; padding: 8px;">The plugin is in an early stage of development and may be unstable. Expect rapid changes and potential issues.</td>
            </tr>
            <tr>
                <td style="border: 1px solid #ddd; padding: 8px;">🟡 <strong>Beta</strong></td>
                <td style="border: 1px solid #ddd; padding: 8px;">The plugin is functional and being tested but some features may still be refined.</td>
            </tr>
            <tr>
                <td style="border: 1px solid #ddd; padding: 8px;">🔵 <strong>Stable</strong></td>
                <td style="border: 1px solid #ddd; padding: 8px;">The plugin is feature-complete, has undergone significant testing, and is considered reliable for most use cases. Minor updates or bug fixes may still occur.</td>
            </tr>
            <tr>
                <td style="border: 1px solid #ddd; padding: 8px;">🟢 <strong>Production</strong></td>
                <td style="border: 1px solid #ddd; padding: 8px;">The plugin is fully stable, widely tested, and officially recommended for all users. It follows strict maintenance and support policies.</td>
            </tr>
        </tbody>
    </table>

    <h3 style="margin-top: 20px;">Available plugins</h3>
</div>
