@{
    ViewData["Title"] = "Lawn Care Calendar";
}

<h1>@ViewData["Title"]</h1>

<div class="calendar-container">
    <div class="calendar-header">
        <button id="prevMonth" class="btn btn-secondary">&lt; Prev</button>
        <h2 id="currentMonthYear"></h2>
        <button id="nextMonth" class="btn btn-secondary">Next &gt;</button>
    </div>
    <div class="calendar-grid">
        <div class="day-name">Sun</div>
        <div class="day-name">Mon</div>
        <div class="day-name">Tue</div>
        <div class="day-name">Wed</div>
        <div class="day-name">Thu</div>
        <div class="day-name">Fri</div>
        <div class="day-name">Sat</div>
    </div>
    <div id="calendarDays" class="calendar-grid">
        
    </div>
</div>

@section Scripts {
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript">
        // TODO ADD CALENDAR JAVASCRIPT
    </script>
}

@section Styles {
    <!-- NEW: Link to your external calendar.css file -->
    <link href="~/css/calendar.css" rel="stylesheet" asp-append-version="true" />
}