<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

    <title>Finance Form (Comparison Sets)</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/annotations.js"></script>
    <script src="https://code.highcharts.com/modules/accessibility.js"></script>
    <style>
        .col-form-label { width:140px; }
        html { font-size: 75% !important; }
        @media (max-width: 2000px) { html { font-size: 70% !important; } }
    </style>
</head>
<body>
    <div class="pt-2 mx-2 container-fluid row">
    <h3 align="center">Comparison Sets (go to <a href="/">Finance Tracker</a>)</h3>

    <div class="row">
    </div>

    <table class="table table-sm table-dark table-striped">
    <thead>
    <tr>
    <th class="text-center">Action</th>
    {% for d in comp_data[finance['COMP_SETS'][1][0]]['vars'] %}
        {% if d != 'id' %}
            <th class="text-center">{{ d|replace('_', '<br>')|safe }}</th>
        {% endif %}
    {% endfor %}
    </tr>
    </thead>
    {% for c in finance['COMP_SETS'] %}
        {% if c[0] != 0 %}
        <tr>
            <td><button class="btn btn-danger bg-danger-subtle text-danger"
                onClick="DelCSet({{c[0]}})"><span class="bi bi-trash3"> Delete</button></td>
            {% for d in comp_data[c[0]]['vars'] %}
                {% if d != 'id' %}
                    {% if d == 'name' %}
                        <td class="align-middle">{{comp_data[c[0]]['vars'][d]}}</td>
                    {% else %}
                        <td class="text-center align-middle">{{comp_data[c[0]]['vars'][d]}}</td>
                    {% endif %}
                {% endif %}
            {% endfor %}
        </tr>
        {% endif %}
    {% endfor %}
    </table>

    <script>
    function DelCSet( id )
    {
        // POST to a delete, success should just reload this page
        $.ajax( { type: 'POST', url: '/delcset', contentType: 'application/json',                                                   data: JSON.stringify( { 'id': id } ), success: function() { window.location='cset' } } )
    }
    </script>
</body>
</html>

