@page "/links"
@using YaeBlog.Core.Models

@inject BlogOptions BlogOptionsInstance

<PageTitle>
    友链
</PageTitle>

<div style="height: 100%">
    <div class="link-background" style="background-image: url('@(BlogOptionsInstance.EssayImage)')">
        <div class="link-content">
            <FluentStack Orientation="@Orientation.Vertical"
                         HorizontalAlignment="@HorizontalAlignment.Center">
                <FluentLabel Typo="@Typography.H2" Style="color: white">
                    友 情 链 接
                </FluentLabel>

                <div style="height: 5rem"></div>

                <FluentCard Style="padding: 3rem;">
                    <FluentGrid>
                        @foreach (FriendLink link in BlogOptionsInstance.Links)
                        {
                            <FluentGridItem xs="12" sm="6" md="4" lg="3">
                                <a href="@(link.Link)" target="_blank">
                                    <div class="link-item">
                                        <div class="link-item-image">
                                            <img src="@(link.AvatarImage)" alt="@(link.Name)">
                                        </div>

                                        <div style="margin: 0.5rem">
                                            <FluentLabel Typo="@Typography.H4">
                                                @(link.Name)
                                            </FluentLabel>

                                            <FluentLabel Typo="@Typography.Body" Style="color: #718096">
                                                @(link.Description)
                                            </FluentLabel>
                                        </div>


                                    </div>
                                </a>
                            </FluentGridItem>
                        }
                    </FluentGrid>
                </FluentCard>
            </FluentStack>
        </div>
    </div>

    <BlogFooter/>
</div>

@code {

}