<div ui-view="organization"></div>
<at-panel>
    <at-panel-heading title="{{:: vm.panelTitle }}"></at-panel-heading>

    <at-tab-group>
        <at-tab state="vm.tab.details">{{:: vm.strings.get('tab.DETAILS') }}</at-tab>
        <at-tab state="vm.tab.users">{{:: vm.strings.get('tab.USERS') }}</at-tab>
    </at-tab-group>

    <at-panel-body ng-if="!$state.current.name.includes('users')">
        <at-form state="vm.form" autocomplete="off" id="application_form">
            <at-input-text col="4" tab="1" state="vm.form.name" id="application_name_group"></at-input-text>
            <at-input-text col="4" tab="2" state="vm.form.description" id="application_description_group"></at-input-text>
            <at-input-lookup col="4" tab="3" state="vm.form.organization" id="application_organization_group"></at-input-lookup>
            <at-divider></at-divider>
            <at-input-select col="4" tab="4" state="vm.form.authorization_grant_type" id="application_authorization_grant_type_group"></at-input-select>
            <at-input-text col="4" tab="5" state="vm.form.redirect_uris" id="application_redirect_uris_group"></at-input-text>
            <at-input-select col="4" tab="6" state="vm.form.client_type" id="application_client_type_group"></at-input-select>

            <at-action-group col="12" pos="right">
                <at-form-action type="cancel" to="applications"></at-form-action>
                <at-form-action type="save"></at-form-action>
            </at-action-group>
        </at-form>
    </at-panel-body>

    <at-panel-body ng-if="$state.current.name.includes('users')">
        <div ui-view="userList"></div>
    </at-panel-body>
</at-panel>
