<app-grid>
    <div class="wide-full">
        <br/>
        <h1>Welcome to my homepage!</h1>
    </div>
    <mat-card>
        <h2>Who am I?</h2>
        <p>
            I'm Lukas, a german student doing software development and more cool sciency stuff and this is my webpage where I want to showcase some of my work.
        </p>
    </mat-card>
    <mat-card class="wide-2 tall-2">
        <a href="https://lukas-eisenhauer.de/git/lukas/tree-os">
            <h2>Tree-os</h2>
        </a>
        <img src="https://lukas-eisenhauer.de/git/lukas/tree-os/blob/master/tree-os.png?raw=true">
        <div class="multi-column">
            <p>
                Tree os is a hobby operating system I mainly develop just for the learning experience. As of now, it supports some multitasking and I am currently in the process of adding a file system and can already read files!
            </p>
            <p>
                I took most of my knowlege from the excellent <a href="https://wiki.osdev.org">OS dev wiki</a>, wich, despite not having actively been updated for years, still contians lots of accurate information. This is because most of the old standards
                like the x86 instruction set are still in use to this day and newer standards, x86_64 are mostly if not completly backwards compatible.
            </p>
        </div>
    </mat-card>

    <mat-card>
        <a href="https://lukas-eisenhauer.de/git/lukas/Traffic-Simulator">
            <h2>Traffic simulator</h2>
        </a>
        <img src="https://lukas-eisenhauer.de/git/lukas/Traffic-Simulator/blob/master/screenshot.PNG?raw=true">
        <p>
            For school, I have to write a scientific article about something regarding "everyday physics". I am focusing on the design of urban junctions and need a simulation for cars traversing different designs. You can find the current code
            <a href="https://lukas-eisenhauer.de/git/lukas/Traffic-Simulator">on my git</a>.
        </p>
    </mat-card>
    <mat-card>
        <h2>Websites</h2>
        <p>
            I personally created this website you are currently looking at using <a href="https://angular.io">Angular</a> and the <a href="https://material.io/design">Material design theme</a>. Additionally, I also created <a href="https://www.mpe.mpg.de/~eisenhau/">Frank Eisenhauer's webpage</a>            and host an instance of <a href="https://lukas-eisenhauer.de/git">gitBucket</a>.
        </p>
        <p>
            The backend is made using <a href="https://rubyonrails.org/">Ruby on rails</a>.
        </p>
    </mat-card>
    <mat-card *ngIf="quotes.length > 0">
        <h2>Quotes:</h2>
        <div class="flex-center" *ngIf="loadingQuotes; else quotesTemplate">
            <mat-spinner color="primary" mode="indeterminate"></mat-spinner>
        </div>
        <ng-template #quotesTemplate>
            <div *ngFor="let quote of quotes">
                <blockquote> {{quote.quote}} <br> <i>-{{quote.user}}</i> </blockquote>
            </div>
        </ng-template>
    </mat-card>
    <mat-card *ngIf="userStatuses.length > 0">
        <h2>User statuses:</h2>
        <div class="flex-center" *ngIf="loadingStatuses; else statusesTemplate">
            <mat-spinner color="primary" mode="indeterminate"></mat-spinner>
        </div>
        <ng-template #statusesTemplate>
            <div *ngFor="let userStatus of userStatuses">
                <h4 style="text-align: left;"> {{userStatus.user}} </h4>
                <p> {{userStatus.message}} </p>
            </div>
        </ng-template>
    </mat-card>
</app-grid>