@model Aberwyn.Models.MenuViewModel

@{
    var hideSidebar = Context.Request.Path.Value.EndsWith("/nosidebar", StringComparison.OrdinalIgnoreCase);
    Layout = hideSidebar ? null : "_Layout";
}
<!DOCTYPE html>
<html lang="sv" ng-app="mealMenuApp">
<head>
    <meta charset="utf-8" />
    <title>Veckomeny</title>

    <!-- AngularJS -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-sanitize.js"></script>
    <script src="~/js/menu.js"></script>

    <!-- CSS -->
    <link rel="stylesheet" href="~/css/meal-menu.css" />
    <style>
      .view-selector { position: absolute; top: 24px; right: 24px; }
      .view-selector select { padding: 6px 10px; border-radius: 4px; border: none; background: #546E7A; color: #ECEFF1; font-size: 0.95rem; cursor: pointer; }
      .list-view .day-item { background: #37474F; margin-bottom: 16px; padding: 16px; border-radius: 8px; }
      .list-view .day-header { font-size: 1.4rem; color: #FFEB3B; margin-bottom: 8px; position: relative; }
      .list-view .day-header::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 40px; height: 3px; background: #FFEB3B; border-radius: 2px; }
      .meal-selection { margin: 6px 0; font-size: 1rem; }
      .meal-selection a { color: #ECEFF1; text-decoration: none; }
      .meal-selection a:hover { text-decoration: underline; }
      .not-assigned { color: #B0BEC5; font-style: italic; }
      .card-view .card-container { display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 16px; }
      .meal-card { position: relative; height: 180px; color: #fff; background-size: cover; background-position: center; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 8px rgba(0,0,0,0.3); display: flex; align-items: flex-end; cursor: pointer; }
      .meal-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top,rgba(0,0,0,0.7),transparent); }
      .card-content { position: relative; padding: 12px; z-index: 1; width: 100%; }
      .card-content .day { font-size: 1.2rem; font-weight: bold; margin-bottom: 6px; }
      .card-content .meal { font-size: 0.9rem; line-height: 1.2; }
    </style>
</head>
<body ng-controller="MealMenuController" ng-init="viewMode='list'">
  <div class="meal-menu-page" style="position:relative">
    <h1>Veckomeny</h1>

    <!-- Vecko-navigering -->
    <div class="date-picker">
      <button ng-click="goToPreviousWeek()">← Föregående vecka</button>
      <span>Vecka {{selectedWeek}} – {{selectedYear}}</span>
      <button ng-click="goToNextWeek()">Nästa vecka →</button>
    </div>

    <!-- Vy-väljare -->
    <div class="view-selector">
      <label for="viewModeSelect">Visa:</label>
      <select id="viewModeSelect" ng-model="viewMode">
        <option value="list">Lista</option>
        <option value="card">Kort</option>
      </select>
    </div>

    <!-- Vy: List eller Kort -->
    <div ng-switch="viewMode">
      <div ng-switch-when="list" class="list-view">
        <div ng-repeat="day in daysOfWeek" class="day-item">
          <div class="day-header">{{day}}</div>
          <div class="meal-info" ng-if="menu[day]">
            <div ng-if="menu[day].breakfastMealId" class="meal-selection">
              <a href="/Meal/View/{{menu[day].breakfastMealId}}" target="_blank"><strong>Frukost:</strong> {{menu[day].breakfastMealName}}</a>
            </div>
            <div ng-if="menu[day].lunchMealId" class="meal-selection">
              <a href="/Meal/View/{{menu[day].lunchMealId}}" target="_blank"><strong>Lunch:</strong> {{menu[day].lunchMealName}}</a>
            </div>
            <div ng-if="menu[day].dinnerMealId" class="meal-selection">
              <a href="/Meal/View/{{menu[day].dinnerMealId}}" target="_blank"><strong>Middag:</strong> {{menu[day].dinnerMealName}}</a>
            </div>
          </div>
          <div ng-if="!menu[day]"><span class="not-assigned">Inte bestämd</span></div>
        </div>
      </div>

      <div ng-switch-when="card" class="card-view">
        <div class="card-container">
          <div ng-repeat="day in daysOfWeek"
               class="meal-card"
               ng-style="{'background-image':'url('+getDayImage(day)+')'}"
               ng-click="openMeal(getMealIdByDay(day))">
            <div class="card-content">
              <div class="day">{{day}}</div>
              <div class="meal" ng-if="menu[day].breakfastMealName">Frukost: {{menu[day].breakfastMealName}}</div>
              <div class="meal" ng-if="menu[day].lunchMealName">Lunch: {{menu[day].lunchMealName}}</div>
              <div class="meal" ng-if="menu[day].dinnerMealName">Middag: {{menu[day].dinnerMealName}}</div>
              <div class="meal" ng-if="!menu[day]">Inte bestämd</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
