squidex/src/Squidex/app/features/apps/pages/apps-page.component.html

<sqx-title message="Apps"></sqx-title>

<div class="apps-section">
    <h1 class="apps-title">Hi {{authState.user?.displayName}}</h1>

    <div class="subtext">
        Welcome to  Squidex.
    </div>
</div>

<ng-container *ngIf="appsState.apps | async; let apps">
    <div class="apps-section">
        <div class="empty" *ngIf="apps.length === 0">
            <h3 class="empty-headline">You are not collaborating to any app yet</h3>
        </div>

        <div class="card card-href card-app float-left" *ngFor="let app of apps; trackBy: trackByApp" [routerLink]="['/app', app.name]">
            <div class="card-body">
                <div class="row no-gutters">
                    <div class="col-auto card-left">
                        <sqx-avatar [image]="app.image" [identifier]="app.name"></sqx-avatar>
                    </div>
                    <div class="col">
                        <h4 class="card-title">{{app.displayName}}</h4>

                        <div class="card-text card-links">
                            <a [routerLink]="['/app', app.name]" sqxStopClick>Edit</a>

                            <span class="deeplinks">
                                &nbsp;|
                                <a [routerLink]="['/app', app.name, 'content']" sqxStopClick>Content</a> &middot;
                                <a [routerLink]="['/app', app.name, 'assets']" sqxStopClick>Assets</a> &middot;
                                <a [routerLink]="['/app', app.name, 'settings']" sqxStopClick>Settings</a>
                            </span>
                        </div>

                        <div class="card-text">
                            {{app.description}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</ng-container>

<div class="apps-section" *ngIf="(uiState.settings | async).canCreateApps">
    <div class="card card-template card-href" (click)="createNewApp('')">
        <div class="card-body">
            <div class="card-image">
                <img src="./images/add-app.png" />
            </div>

            <h4 class="card-title">New App</h4>

            <div class="card-text">
                Create a new blank app without content and schemas.
            </div>
        </div>
    </div>

    <div class="card card-template card-href" (click)="createNewApp('Blog')">
        <div class="card-body">
            <div class="card-image">
                <img src="./images/add-blog.png" />
            </div>

            <h4 class="card-title">New Blog Sample</h4>

            <div class="card-text">
                <div>Start with our ready to use blog.</div>
                <div>
                    Sample Code: <a href="https://github.com/Squidex/squidex-samples/tree/master/csharp/Sample.Blog" sqxStopClick sqxExternalLink>C#</a>
                </div>
            </div>
        </div>
    </div>

    <div class="card card-template card-href" (click)="createNewApp('Profile')">
        <div class="card-body">
            <div class="card-image">
                <img src="./images/add-profile.png" />
            </div>

            <h4 class="card-title">New Profile Sample</h4>

            <div class="card-text">
                <div>Create your profile page.</div>
                <div>
                    Sample Code: <a href="https://github.com/Squidex/squidex-samples/tree/master/csharp/Sample.Profile" sqxStopClick sqxExternalLink>C#</a>
                </div>
            </div>
        </div>
    </div>

    <div class="card card-template card-href" (click)="createNewApp('Identity')">
        <div class="card-body">
            <div class="card-image">
                <img src="./images/add-identity.png" />
            </div>

            <h4 class="card-title">New Identity App</h4>

            <div class="card-text">
                <div>Create app for Squidex Identity.</div>
                <div>
                    <a href="https://github.com/Squidex/squidex-identity" sqxStopClick sqxExternalLink>Project</a>
                </div>
            </div>
        </div>
    </div>
</div>

<div *ngIf="info" class="info">{{info}}</div>

<ng-container *sqxModal="addAppDialog">
    <sqx-app-form [template]="addAppTemplate"
        (complete)="addAppDialog.hide()">
    </sqx-app-form>
</ng-container>

<ng-container *sqxModal="onboardingDialog">
    <sqx-onboarding-dialog
        (close)="onboardingDialog.hide()">
    </sqx-onboarding-dialog>
</ng-container>

<ng-container *sqxModal="newsDialog">
    <sqx-news-dialog [features]="newsFeatures"
        (close)="newsDialog.hide()">
    </sqx-news-dialog>
</ng-container>