<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stack Visualization</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: rgb(253, 253, 253);
            color: #000000;
        }

        .null-frame {
            border: none;
            margin: 10px;
            border-radius: 4px;
            position: relative;
            display: flex;
            flex-direction: column; /* Align items vertically */
            align-items: flex-start;
            margin-bottom: 10px;
            padding-top: 0px; /* Adjust padding to create space for the function header */
            box-sizing: border-box; /* Include padding and border in the element's total width and height */

        }

        .green {
            border-color: green !important;
            color: green !important;
        }

        .blue {
            border-color: #143aa1 !important;
            color: #143aa1 !important;
        }
        .function-frame {
            border: 3px solid #143aa1;
            margin: 10px;
            border-radius: 4px;
            position: relative;
            display: flex;
            flex-direction: column; /* Align items vertically */
            align-items: flex-start;
            margin-bottom: 10px;
            padding-top: 5px; /* Adjust padding to create space for the function header */
            box-sizing: border-box; /* Include padding and border in the element's total width and height */
        }
        .frame-label {
            position: absolute;
            top: -12px; /* Adjust this value to position the label on the border */
            left: 15%;
            transform: translateX(-50%);
            padding: 0px;
            margin: 0px;
            border-radius: 4px;
            white-space: nowrap;
            background-color: #e4e2e2;
        }

        /* First function frame */
        .function-frame:first-child {
           border: 3px solid #129432;
           color: #129432;
        }
        

        .stack-cell {
            display: grid;
            grid-template-columns: 20% 80%;
            width: 98%;
            margin: 2px;
            padding: 0px;
            color: #666;
            border: 2px solid #2b385c;
            background-color: #ffffff;
            border-right: 0px;
        }

        .stack-word-container {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 0px;
        }
        .stack-word {
            border-bottom: 1px solid #b3b3b3;
            border-right: 2px solid #2b385c;
            display: flex;
            justify-content: space-between;
            color: #666;
            text-align: left;
            background-color: #a9b9de;
        }

        .function-frame:first-child  .stack-word {
            background-color: #b3e6b3;
        }
        

        .address {
            font-size: 0.9em;
            color: #555;
            position: relative; /* Change from absolute to relative */
            right: 160px; /* Position the address 120px to the left of the word */
            top: 50%;
            transform: translateY(-50%);
            white-space: nowrap;
        }

        .stack-word ~ .null{
            background-color: #b3b3b3 !important; 
            border-right: 3px dotted #2b385c;
            height: 1;
        }

        .null{
            background-color: #b3b3b3 !important;
        }

        

        .stack-word ~ .null > .address{
            display: none;
        }
        
        .stack-word > .value{
            font-size: 0.9em;
            color: #555;
            position: relative; /* Change from absolute to relative */
            right: 160px; /* Position the address 120px to the left of the word */
            top: 50%;
            transform: translateY(-50%);
            white-space: nowrap;
        }

        .null-frame .stack-cell{
            border: 2px solid #666
        }

        .cell-label {
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            background-color: #5b73b4;
            color: #000;
            /* box sizing */
            border-right: 2px solid #2b385c;
            font-size: 0.8em;
            overflow-x: hidden;
            margin: 0px;
            z-index: 1000;
        }
        .word-note {
            font-style: italic;
            color: red;
            position: absolute;
            right: -150px; /* Adjust this value based on your layout */
            top: 50%;
            transform: translateY(-50%);
            white-space: nowrap;
        }
        .word-note::before {
            content: '←';
            margin-right: 5px;
            color: red;
        }

        
        .stack {
            max-width: 400px;
            margin-left: 100px;
            background-color: #e4e2e2;
            padding: 5px ;
            border-radius: 5px;
        }
        .hidden{
            display: none;
        }
    </style>
</head>
<body>
    <div class="stack">
        {% for frame in stack.frames|reverse %}
        <div class="{% if frame.function %}function-frame{% else %}null-frame{% endif %} {% if frame.color %}  {{frame.color}} {% endif %}" {% if frame.color %} style="border-color: {{ frame.color }};"{% endif %}>
            {% if frame.name %}
            <div class="frame-label">{{ frame.name }}</div>
            {% endif %}
            {% for cell in frame.cells|reverse %}
            <div class="stack-cell {% if cell.color %}  {{frame.color}} {% endif %}" {% if cell.color %}  style="border-color: {{ cell.color }};" {% endif %}>
                <div class="cell-label">{{ cell.label|e }} {%if cell.size > 1 %}[{{cell.size}}] {% endif %}</div>
                <div class="stack-word-container">
                    {% for word in cell.words %}
                    <div class="stack-word {% if word.value == None %} null {% if not loop.first and loop.previtem.value == None and not loop.last %} hidden {% endif %}{% endif %}">
                        <div class="address"> {{ '%0x' % word.address }}</div>
                        {% if word.note %}<div class="word-note {{word.noteColor}}">{{word.note}}</div> {% endif %}
                        {% if word.value != None %}
                            <div class="value">{{ word.value|e }}</div>
                        {% else %}
                            <div class="value">&nbsp;</div>
                        {% endif %}
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endfor %}
        </div>
        {% endfor %}
    </div>
</body>
</html>
