<?php
    $type = $tabs->section;

    $navCss = '';
    $contentCss = '';
    $paneCss = '';

    if ($tabs->stretch) {
        $navCss = 'layout-row min-size';
        $contentCss = 'layout-row';
        $paneCss = 'layout-cell';
    }
?>
<div class="<?= $navCss ?>">
    <ul class="nav nav-tabs" role="tablist" aria-orientation="horizontal" aria-label="<?= e(trans('system::lang.aria-label.tabs')) ?>">
        <?php $index = 0; foreach ($tabs as $name => $fields): ?>
            <li class="<?= $index==0?'active':''?>" role="presentation">
                <a href="#<?= $type.'tab-'.$index ?>" role="tab" tabindex="0" aria-selected="<?= $index++==0?'true':'false'?>"><?php if ($tabs->getIcon($name)): ?><span class="<?= $tabs->getIcon($name) ?>"></span><?php endif; ?><?= e(trans($name)) ?></a>
            </li>
        <?php endforeach ?>
    </ul>
</div>

<div class="tab-content <?= $contentCss ?>">
    <?php $index = 0; foreach ($tabs as $name => $fields): ?>
        <div tabindex="0" role="tabpanel" <?= $index==0?'':'hidden="hidden"'?> aria-label="<?= e(trans($name)) ?>"
            class="tab-pane <?= e($tabs->getPaneCssClass($index, $name)) ?> <?= $index++==0?'active':''?> <?= $paneCss ?>"
            id="<?= $type.'tab-'.$index ?>">
            <?= $this->makePartial('form_fields', ['fields' => $fields]) ?>
        </div>
    <?php endforeach ?>
</div>
