@page "/blog"
@rendermode InteractiveServer

<h3>Blog</h3>

@* 
Dependency Injection (DI)를 사용하는 블로그 앱
   
   목표: Blazor의 DI 패턴을 이해하고 데이터 관리
   
   포인트
   • @inject 사용
   • 서비스 라이프사이클 관리 (싱글턴, 트랜지언트, 스코프드)
   
   설명: 블로그 포스트를 추가, 삭제, 수정할 수 있는 간단한 블로그 앱을 만들어보세요. 데이터를 관리하는 서비스 클래스를 DI로 주입해 데이터를 처리합니다.

 *@

@if (BlogService.Instance.ReadPosts() == null || BlogService.Instance.ReadPosts().Count == 0)
{
    <p>No posts available.</p>
}
else
{
    <ul>
        @foreach (var post in BlogService.Instance.ReadPosts())
        {
            <li>
                <h4>@post.Title</h4>
                <p>@post.Content</p>
                
                
                <button disabled="@(isEdit)" @onclick="() => EditPost(post.Id)">Edit</button>
                <button disabled="@(isEdit)" @onclick="() => RemovePost(post.Id)">Delete</button>
            </li>
        }
    </ul>
}
<hr />

@* *@
<h3>@(isEdit ? "Edit Post" : "Add New Post")</h3>
@* *@

<div class="form-group">
    <label>Title:</label>
    <InputText @bind-Value="title" />
</div>
@* *@
<div class="form-group">
    <label>Content:</label>
    <InputTextArea @bind-Value="content" />
</div>
@* *@
<button @onclick = "SavePost">@(isEdit ? "Done" : "Add")</button>