<style>
    .create-sim > section {
        padding: 1em;
        display: grid;
        grid-gap: .5em;
    }
    .create-sim bz-select[data-output="keyframesSelector"] {
        margin-top: 1em;
    }
    .create-sim .cols-2 { align-items: baseline; }
    .create-sim button[eicbutton][rounded] {
        background-color: #367;
        color: #DDD !important;
        padding: .5em 1em !important;
        justify-self: center;
    }
</style>
<article eiccard class="create-sim">
    <header>
        <h1>Create a simulation</h1>
    </header>
    <section>
        <div class="cols-2">
            <label>Simulation first keyframe:</label>
            <bz-select label="Existing keyframes..." data-output="keyframesSelector"></bz-select>
        </div>
        <div class="cols-2">
            <label>Simulation Name:</label>
            <input type="text" data-output="simName" placeholder="(min 5 chars)"/>
        </div>
        <button eicbutton rounded data-output="btnCreateSim" data-trigger="onCreateSim">Create Simulation</button>
    </section>
</article>
