<%# set a tab side var, for convenience %>
<% let tab_side = ctrl.props.tab_control_side ? ctrl.props.tab_control_side : SideType.Top%>

<div
        <%- include('../../attributes/common/base_attributes', {ctrl : ctrl}) %>
>
    <%# extra div to add the tab style%>
    <div class="tab_control">
        <% if ( tab_side == SideType.Bottom) { %>
        <%# add tab pages before adding the buttons, so the buttons are at the bottom%>
        <%- include(`../container`, {child: ctrl}) %>
        <% }%>

        <%# add buttons for each tab page%>
        <% ctrl.children.forEach(child =>{ %>
        <button mat-raised-button
                color="primary"
                class="tab_button"
                (click)="mgOnTabSelectionChanged('<%-ctrl.props.id%>', '<%-child.props.layer%>')"
                [ngClass]="{'tab_button_active' : mgIsTabPageSelected('<%- ctrl.props.id %>', <%-child.props.layer %>)}"
        >
            {{mgGetTabpageText('<%- ctrl.props.id %>', '<%- child.props.layer %>')}}
        </button>
        <% } ) %>

        <% if ( tab_side == SideType.Top) { %>
        <%# add tab pages after adding the buttons, so the buttons are at the top%>
        <%- include(`../container`, {child: ctrl}) %>
        <% }%>
    </div>
</div>

