{notempty name="$rows"}
<div class="tiny-step-tabs">
    <tiny-col {$sizeAttr[0]|raw}></tiny-col>
    <tiny-col {$sizeAttr[1]|raw}>
        <tiny-steps :data="{$id}Options" v-bind="{$id}Op" @click="{$id}Click"></tiny-steps>
    </tiny-col>
</div>
<div class="tiny-step-content">
    {volist name="rows" id="row"}
    <div v-show="{$id}Op.active == '{$row.index}'">
        {:$row.content->render()}
    </div>
    {/volist}
</div>
{if condition="!$readonly"}
<div class="tiny-step-buttons">
    <tiny-col {$sizeAttr[0]|raw}></tiny-col>
    <tiny-col {$sizeAttr[1]|raw}>
        <tiny-button :reset-time="0" :disabled="{$id}Op.active == 0"
            @click="{$id}PrevClick">{:__blang('bilder_step_prev')}</tiny-button>
        <tiny-button v-show="{$id}Op.active < {$id}Options.length - 1" :reset-time="0"
            :disabled="{$id}Op.active == {$id}Options.length - 1"
            @click="{$id}NextClick">{:__blang('bilder_step_next')}</tiny-button>
        <tiny-button type="primary" :reset-time="0" v-show="{$id}Op.active == {$id}Options.length - 1"
            @click="{$id}FinishClick">{:__blang('bilder_step_finish')}</tiny-button>
    </tiny-col>
</div>
{/if}
{/notempty}