{{!-- template-lint-disable no-forbidden-elements --}}
<style type="text/css">
    .test-chart { border: solid 1px #aaa; margin: 3pt; }
    .crosses > div > dl > dt::before {
        display: inline-block;
        width: 1em;
        content: "\2717";
        color: #e00;
    }

    .crosses > div > dl > dd {
        padding-left: 1em;
    }

    .row .card {
        margin-bottom: 2rem;
    }
</style>

<div class="container-fluid">
    {{!
        Language buttons
    }}
    <div class="row">
        <div class="col-lg-12">
            <div class="card border-info">
                <div class="card-body">
                    <OxiBase::ButtonContainer @buttons={{this.buttons}} />
                </div>
            </div>
        </div>
    </div>

    {{!
        Charts
    }}
    <div class="row">
        <div class="col-lg-12">
            <div class="card border-info">
                <div class="card-header bg-info"></div>
                <div class="card-body">
                    <div class="row">
                        {{#each this.charts as |chart|}}
                            <div class="col">
                                <OxiSection @content={{chart}}/>
                            </div>
                        {{/each}}
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{!
        Forms
    }}
    <div class="row">
        <div class="col-lg-12">
            <OxiBase::ButtonContainer @buttons={{this.formNavButtons}} />

            {{#each this.forms as |form index|}}
                {{#if (eq index this.selectedFormIndex) }}
                    <div class="card border-info">
                        <div class="card-header bg-info"></div>
                        <div class="card-body">
                            <OxiSection @content={{form}}/>
                        </div>
                    </div>
                {{/if}}
            {{/each}}
        </div>
    </div>

    {{!
        Buttons
    }}
    <div class="row">
        <div class="col-lg-12">
            <div class="card border-info">
                <div class="card-header bg-info"></div>
                <div class="card-body">
                    <form>
                        <OxiBase::ButtonContainer @buttons={{this.test_buttons}} />
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{!
        Various sections
    }}
    <div class="row">
        <div class="col-lg-12">
            {{#each this.sections as |sectionDef|}}
                <div class="card border-info">
                    <div class="card-header bg-info"></div>
                    <div class="card-body">
                        <OxiSection @content={{sectionDef}}/>
                    </div>
                </div>
            {{/each}}
        </div>
    </div>
</div>

