@let recipe = recipeView().recipe;
<article>
    <div id="recipe-header">
        <div>
            <h1>{{ recipe.title }}</h1>
            <div class="recipe-actions">
                @if (isLoggedIn()) {
                    <button id="star" matButton="filled" (click)="starMutation.mutate()">
                        <div id="star-label">
                            <fa-icon [icon]="faStar" />
                            <span>Star</span>
                            <span id="star-count">{{ recipe.starCount }}</span>
                        </div>
                    </button>
                } @else {
                    <div>
                        <fa-icon [icon]="faStar" />
                        <span id="star-count">{{ recipe.starCount }}</span>
                    </div>
                }
                @if (isOwner()) {
                    <button class="actions-button" matButton="text" [matMenuTriggerFor]="recipeActionsMenu">
                        <fa-icon [icon]="faEllipsis" size="3x"></fa-icon>
                    </button>
                    <mat-menu #recipeActionsMenu="matMenu">
                        <button mat-menu-item (click)="onRecipeEdit()">Edit recipe</button>
                        <button mat-menu-item (click)="onRecipeDelete()">Delete recipe</button>
                    </mat-menu>
                }
            </div>
        </div>
        <div>
            <div>
                <fa-icon [icon]="faUser" />
                <span>{{ recipe.owner.username }}</span>
            </div>
            @if (recipe.isPublic) {
                <fa-icon [icon]="faGlobe" />
            } @else {
                <fa-icon [icon]="faLock" />
            }
        </div>
    </div>
    @if (mainImageQuery.isLoading()) {
        <app-spinner></app-spinner>
    } @else if (mainImageQuery.isError()) {
        <p>There was an error loading the main image.</p>
    } @else if (mainImageQuery.isEnabled()) {
        <img
            id="main-image"
            [src]="mainImageQuery.data()!.blobUrl"
            [alt]="recipe.mainImage!.alt"
            [height]="recipe.mainImage!.height"
            [width]="recipe.mainImage!.width"
        />
    }

    @if (recipe.ingredients?.length) {
        <h3>Ingredients</h3>
        <ul class="ingredients-list">
            @for (ingredient of recipe.ingredients; track $index) {
                <li class="ingredient">
                    @if (ingredient.amount) {
                        <span>{{ ingredient.amount }}</span>
                    }
                    <span>{{ ingredient.name }}</span>
                    @if (ingredient.notes) {
                        <span>{{ ingredient.notes }}</span>
                    }
                </li>
            }
        </ul>
    }

    <h3>Instructions</h3>
    <div [innerHTML]="recipe.text"></div>

    <app-recipe-comments-list [recipeUsername]="recipe.owner.username" [recipeSlug]="recipe.slug" />
</article>