{% extends "base.html" %}

{% block title %}SSH Certificate Management - Dashboard{% endblock %}

{% block header %}Certificate Management{% endblock %}

{% block content %}
        <table class="certs-table">
            <thead class="certs-table-header">
            <tr>
                <th>Cert Name</th>
                <th>Status</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>Cert 1</td>
                <td>Active</td>
                <td class="certs-actions-td">
                    <button class="small-button">Renew</button>
                    <button class="small-button">Revoke</button>
                    <button class="small-button">View</button>
                    <button class="small-button">Do smth else</button>
                </td>
            </tr>
            <tr>
                <td>Cert 2</td>
                <td>Expired</td>
                <td class="certs-actions-td">
                    <button class="small-button">Delete</button>
                    <button class="small-button">Delete</button>
                </td>
            </tr>
            <tr>
                <td>Cert 3</td>
                <td>Test</td>
                <td class="certs-actions-td">
                    <button class="small-button">Delete</button>
                    <button class="small-button">Yes</button>
                    <button class="small-button">No no no</button>
                </td>
            </tr>
            <tr>
                <td>Cert 5</td>
                <td>Test</td>
                <td class="certs-actions-td">
                    <button class="small-button">Delete</button>
                </td>
            </tr>
            <tr>
                <td>Cert 4</td>
                <td>Test</td>
                <td class="certs-actions-td">
                    <button class="small-button">Delete</button>
                    <button class="small-button">I</button>
                    <button class="small-button">Love</button>
                    <button class="small-button">You</button>
                </td>
            </tr>
            <tr>
                <td>Cert 6</td>
                <td>Test</td>
                <td class="certs-actions-td">
                    <button class="small-button">Delete</button>
                </td>
            </tr>
            <tr>
                <td>Cert 7</td>
                <td>Test</td>
                <td class="certs-actions-td">
                    <button class="small-button">Delete</button>
                </td>
            </tr>
            </tbody>
        </table>
{% endblock %}

{% block bottom_button %}
<button id="generateCertBtn" class="main-bottom-button">Generate New Certificate</button>
{% endblock %}

{% block extra_content %}
<!-- Modal -->
<div id="generateCertModal" class="modal">
    <div class="modal-content">
        <span class="modal-close">&times;</span>  <!-- ྾ -->
        <h2>Generate New Certificate</h2>
        <form id="generateCertForm" class="modal-cert-form">
            <label for="keyName">Key Name:</label>
            <input type="text" id="keyName" name="keyName" required>

            <label for="keyType">Key Type:</label>
            <select id="keyType" name="keyType">
                <option value="RSA">RSA</option>
                <option value="ECDSA">ECDSA</option>
                <option value="Ed25519">Ed25519</option>
            </select>

            <label for="duration">Duration:</label>
            <input type="text" id="duration" name="duration" required>
            <!--suppress HtmlFormInputWithoutLabel -->
            <select id="durationUnit" name="durationUnit">
                <option value="minutes">minutes</option>
                <option value="hours">hours</option>
                <option value="days">days</option>
            </select>

            <h3>Command that will be executed:</h3>
            <button type="button" id="reloadPreview">Click here to reload preview</button>
            <pre id="commandPreview"></pre>

            <button type="submit" id="executeCommand">Execute!</button>
        </form>
        <div class="modal-logs">  <!-- TODO: use full log component-->
            <h3>Logs:</h3>
            <div id="logContent"></div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
<script src="script.js"></script>
{% endblock %}