<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ISO15118 Certificates</title>
    <link rel="stylesheet" type="text/css" href="/resources/stylesheet.css"/>

    <style>
        .cert-upload {
            display: grid;
            grid-template-columns: 4fr 1fr;
            align-items: center;
            grid-gap: 3px;
            padding-left: 10%;
            padding-right: 10%;
        }

        .cert-upload textarea {
            grid-column: 1 / 3;
            width: 100%;
            height: 10em;
            resize: vertical;
        }

        .horizontal-radios {
            display: inline;
            white-space: nowrap;
        }

        .result-field {
            width: 80%;
            background: #eee;
            display: inline-block;
            padding: 0.5em;
            border-left: 0.8em solid #0ac;
            font-family: monospace;
            font-weight: 400;
            text-align: left;
            box-sizing: border-box;
        }

        .result-field-good {
            background: #b5ffb0;
        }

        .result-field-bad {
            background: #ffbaba;
        }

        .help-text {
            padding-left: 10%;
            padding-right: 10%;
            text-align: justify;
        }

        table.certificates-table {
            border-collapse: collapse;
            width: 100%;
            color: black;
            word-break: normal;
            overflow: hidden;
        }

        table.certificates-table td {
            font-size: 14px;
            padding: 5px 2px;
            border-color: white;
            border-style: solid;
            border-width: 2px;
        }

        table.certificates-table th {
            background-color: #0ac;
            border-color: white;
            border-style: solid;
            border-width: 2px;
            font-weight: bold;
            color: white;
            padding: 2px 2px;
        }

        table.certificates-table tr {
            background: #eee;
        }

        table.certificates-table .td-expandable {
            text-align: left;
            background-color: #fff2c4;
            padding-left: 2em;
            column-span: all;
        }

        table.certificates-table .tr-expandable {
            display: none;
            font-family: monospace;
        }

        table.certificates-table .td-expander:hover {
            background: #ccc;
            cursor: pointer;
        }

    </style>
</head>

<body class="main">
<div class="main main-wide">
    <h1>Plug and Charge Certificates</h1>
    <h2>Loaded Root Certificates</h2>

    <table class="certificates-table">
        <thead>
        <tr>
            <th>Type</th>
            <th>Issuer</th>
            <th>Valid not before (UTC)</th>
            <th>Valid not after (UTC)</th>
            <th>&ctdot;</th>
        </tr>
        </thead>
        <tbody>
        {{table_content_root_certificates}}
        </tbody>
    </table>

    <h2>Loaded SECC Chain</h2>

    <table class="certificates-table">
        <thead>
        <tr>
            <th>Subject</th>
            <th>Issuer</th>
            <th>Valid not before (UTC)</th>
            <th>Valid not after (UTC)</th>
            <th>&ctdot;</th>
        </tr>
        </thead>
        <tbody>
        {{table_content_secc_chain}}
        </tbody>
    </table>

    <h2>Management</h2>
    <h3>Maintenance</h3>

    <form class="buttons-grid help-text" id="maintenance_actions" action="/pnccertificates#maintenance_actions"
          method="post">
        {{maintenance_action_buttons}}
    </form>

    <h3>Certificate Upload</h3>

    <form class="cert-upload" id="cert-upload" action="/pnccertificates#cert-upload" method="post">
        <textarea name="cert_upload" required placeholder="-----BEGIN CERTIFICATE----- ..."></textarea>

        <div class="horizontal-radios">
            Type:
            {{upload_certificate_types}}
        </div>

        <div>
            {{upload_action_buttons}}
        </div>

    </form>

    <h3>Result</h3>

    <span class="result-field {{result_field_color_class}}">{{result_field_content}}</span>

    <h2>Help</h2>

    <div class="help-text">
        <p>
            Root certificates which are currently loaded on the charger are listed under section
            <em>"Loaded Root Certificates"</em>.
            These will be used to verify the connection to the EV and the SECC (Supply Equipment Charge Controller)
            certificate chain.
        </p>
        <p>
            The certificate chain which identifies the SECC to the EV is listed under section
            <em>"Loaded SECC Chain"</em>.
            The chain must be valid up to a loaded root certificate.
        </p>
        <p>
            Management operations are possible in the section <em>"Management"</em>.
            The result of the performed action will be displayed under section<em>"Result"</em>.
        </p>
        <ul>
            <li><em>Reload Certificates</em>: Reload all root certificates and the SECC chain from disk</li>
            <li><em>Renew SECC Chain</em>: Trigger the renewal of the SECC chain via central system</li>
            <li><em>Verify loaded SECC Chain</em>: Verify the loaded SECC chain against the available root certificates</li>
            <li><em>OCSP status check of SECC Chain</em>: Request the validity of the SubCA certificates from the central system</li>
            <li><em>Create CSR</em>: A new Certificate Signing Request will be created</li>
            <li><em>Clear all Root Certificates</em>: All root certificates will be removed</li>
            <li><em>Clear SECC Chain</em>: The SECC certificate chain will be removed</li>
            <li><em>Clear Result</em>: Clear the result line</li>
            <li><em>Clear SECC Private Key Passphrase</em>: Clear the passphrase of the encrypted SECC chain</li>
        </ul>
        <p>
            Certificate data in PEM format can be uploaded to the charger under section<em>"Certificate Upload"</em>.
            Use <em>"Check"</em> to only validate that the data is valid and <em>"Apply"</em> to actually store
            it in the charger. Make sure to select the correct certificate type.
        </p>
        <p>
            <b>Note:</b> After the <em>"Reload Certificates"</em> action, the page must be manually refreshed.
        </p>
    </div>

</div>

<script>
    const expanders = document.getElementsByClassName("td-expander");
    let i;

    for (i = 0; i < expanders.length; i++) {
        expanders[i].addEventListener("click", function () {
            this.classList.toggle("is-expanded");
            let row = this.parentNode
            let expandableRow = row.parentNode.rows[row.rowIndex]
            if (this.classList.contains("is-expanded")) {
                this.innerHTML = "&#x2796;"
                expandableRow.style.display = "contents"
            } else {
                this.innerHTML = "&#x2795;"
                expandableRow.style.display = "none"
            }
        });
    }
</script>

</body>
</html>