@let recipe = recipeView().recipe;
<article>
    <div id="recipe-header">
        <div>
            <h1>{{ recipe.title }}</h1>
            @if (isLoggedIn()) {
                <button id="star" (click)="starMutation.mutate()">
                    <fa-icon [icon]="faStar" />
                    <span>Star</span>
                    <span id="star-count">{{ recipe.starCount }}</span>
                </button>
            } @else {
                <div>
                    <fa-icon [icon]="faStar" />
                    <span id="star-count">{{ recipe.starCount }}</span>
                </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 (mainImageUrl.isSuccess()) {
        <img
            id="main-image"
            [src]="mainImageUrl.data()"
            [alt]="recipe.mainImage.alt"
            [height]="recipe.mainImage.height"
            [width]="recipe.mainImage.width"
        />
    }
    <div [innerHTML]="recipe.text"></div>
    <app-comments-list [recipeUsername]="recipe.owner.username" [recipeSlug]="recipe.slug" />
</article>