awx/awx/ui/client/features/credentials/add-edit-credentials.view.html

<at-panel ng-if="$state.current.name === 'credentials.add' || $state.current.name === 'credentials.edit'">
    <at-panel-heading>{{ vm.panelTitle }}</at-panel-heading>

    <at-tab-group>
        <at-tab state="vm.tab.details">Details</at-tab>
        <at-tab state="vm.tab.permissions">Permissions</at-tab>
    </at-tab-group>

    <at-panel-body>
        <at-form state="vm.form">
            <at-input-text col="4" tab="1" state="vm.form.name"></at-input-text>
            <at-input-text col="4" tab="2" state="vm.form.description"></at-input-text>
            <at-input-lookup col="4" tab="3" state="vm.form.organization"></at-input-lookup>

            <at-divider></at-divider>

            <at-input-select col="4" tab="4" state="vm.form.credential_type"></at-input-select>

            <at-input-group col="4" tab="4" state="vm.form.inputs">
                Type Details
            </at-input-group>

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

<at-panel ng-if="$state.current.name === 'credentials.edit.permissions' ||
                 $state.current.name === 'credentials.edit.permissions.add'">
    <at-panel-heading>Credentials Permissions</at-panel-heading>

    <at-panel-body>
        <div class="at-CredentialsPermissions" ui-view="related"></div>
    </at-panel-body>
</at-panel>

<div ng-if="$state.current.name === 'credentials.edit.permissions.add'" ui-view="modal"></div>