@model Recepie.Models.Recipe

@{
    ViewData["Title"] = "Delete Recipe";
}

<div class="container mt-4">
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <div class="card border-danger">
                <div class="card-header bg-danger text-white">
                    <h2>Delete Recipe</h2>
                </div>
                <div class="card-body">
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle"></i>
                        Are you sure you want to delete this recipe? This action cannot be undone.
                    </div>
                    
                    <h3>@Model.Title</h3>
                    <p class="lead">@Model.Description</p>
                    
                    @if (!string.IsNullOrEmpty(Model.Difficulty))
                    {
                        <p><strong>Difficulty:</strong> <span class="badge bg-info">@Model.Difficulty</span></p>
                    }

                    @if (!string.IsNullOrEmpty(Model.Time))
                    {
                        <p><strong>Time:</strong> @Model.Time</p>
                    }

                    @if (!string.IsNullOrEmpty(Model.Url))
                    {
                        <p><strong>Recipe URL:</strong> <a href="@Model.Url" target="_blank">@Model.Url</a></p>
                    }
                    
                    <form asp-action="Delete" method="post" class="d-inline">
                        <input type="hidden" asp-for="Id" />
                        <div class="d-grid gap-2 d-md-flex justify-content-md-end mt-4">
                            <a href="@Url.Action("Details", new { id = Model.Id })" class="btn btn-secondary">Cancel</a>
                            <button type="submit" class="btn btn-danger">
                                <i class="fas fa-trash"></i> Delete Recipe
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>