<main>
    <h1>Snapshot Test Viewer</h1>

    <div class="block">
        <p class="small-margin dim">Selected test</p>

        <div class="horizontal">
            <div class="flex-1">
                {{ widgets["test-select"] | safe }}
            </div>
            <div class="flex-1">
                {{ widgets["next-changed-snapshot-button"] | safe }}
            </div>
        </div>
    </div>

    <div class="margin-y">
        {{ widgets["test-description"] | safe }}
    </div>

    <div class="horizontal">

        <div class="vertical">
            <h2>Old Snapshot</h2>
            <div class="chart">
                {{ widgets["old-snapshot-html"] | safe }}
            </div>
        </div>

        <div class="vertical">
            <h2>New Snapshot</h2>
            <div class="chart">
                {{ widgets["new-snapshot-html"] | safe }}
            </div>
        </div>
        
    </div>

    <div class="margin-y">
        {{ widgets["approve-button"] | safe }}
    </div>
</main>

<style>
    main {
        margin: 2em auto;
        width: 800px;
        display: flex;
        flex-direction: column;
        gap: 1em;
    }

    h2 {
        color: hsl(0, 0%, 30%);
    }

    .dim {
        font-size: 16px;
        color: hsl(0, 0%, 40%);
        text-decoration: underline;
        margin: 0;
    }

    .horizontal {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: 2em;
    }

    .flex-1 {
        flex: 1;
    }

    .vertical {
        display: flex;
        flex-direction: column;
        gap: 1em;
    }

    .chart {
        padding: 1em;
        border-radius: 0.3em;
        background-color: hsl(28, 100%, 90%);
    }

    .margin-y {
        margin-top: 1em;
        margin-bottom: 1em;
    }

    .small-margin {
        margin-top: 0;
        margin-bottom: 0.5em;
    }

    .newsflash-value-display-value {
        font-size: 18px;
    }
</style>