<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://www.springframework.org/security/tags" prefix="sec" %>
<html>
<head>
  <title><spring:message code="label.addCar"/></title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
  <style>
    body{
      background-image: url("resources/images/showroom-blur.jpg");
    }
    .container {
      margin-top: 60px;

    }
    .car-card {
      display: flex;
      margin-bottom: 20px;
      padding: 10px;
      border: 1px solid #ced4da;
      border-radius: 5px;
      background-color: #fff;
    }

    .car-card .car-image {
      width: 200px;
      height: 200px;
      object-fit: cover;
      margin-right: 20px;
    }

    .car-card .car-details {
      flex-grow: 1;
    }

    .car-card .car-details h5 {
      font-weight: bold;
      margin-bottom: 10px;
    }

    .car-card .car-details p {
      margin-bottom: 5px;
    }

    .car-card .car-details p span {
      font-weight: bold;
    }

    .car-list-container {
      background-color: #f8f9fa;
      padding: 20px;
      border: 1px solid #ced4da;
      border-radius: 5px;
    }

    .car-details-line {
      display: flex;
      align-items: center;
      margin-bottom: 5px;
    }

    .car-details-line span {
      margin-right: 10px;
      font-weight: bold;
    }
    .car-details-spacing {
      margin-left: 20px;
    }
    .buy-car-button {
      padding: 5px 15px;
      font-size: 14px;
    }
    .car-price {
      font-size: 20px;
      font-weight: bold;
      color: #f00;
      margin-top: 10px;
    }


  </style>
</head>
<body>
<header data-bs-theme="dark">
  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="/">Car Dealer Shop</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav me-auto mb-2 mb-md-0">
          <sec:authorize access="isAnonymous()">
            <li class="nav-item">
              <a class="nav-link" href="/login"><spring:message code="label.login"/></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/register"><spring:message code="label.register"/></a>
            </li>
          </sec:authorize>
          <sec:authorize access="hasAnyRole('ROLE_USER', 'ROLE_ADMIN')">
            <li class="nav-item">
              <a class="nav-link" href="/appCars"><spring:message code="label.addCar"/></a>
            </li>
          </sec:authorize>
          <li class="nav-item">
            <a class="nav-link" href="/appCarList"><spring:message code="label.carheader"/></a>
          </li>
          <sec:authorize access="hasRole('ROLE_ADMIN')">
            <li class="nav-item">
              <a class="nav-link" href="/appUsers"><spring:message code="label.addAppUser"/></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="appUserRole"><spring:message code="label.role"/></a>
            </li>
          </sec:authorize>
          <sec:authorize access="hasRole('ROLE_USER')">
            <li class="nav-item">
              <a class="nav-link" href="/exampleOne"><spring:message code="label.example"/> 1</a>
            </li>
          </sec:authorize>
          <sec:authorize access="hasRole('ROLE_STUDENT')">
            <li class="nav-item">
              <a class="nav-link" href="exampleThree"><spring:message code="label.example"/> 3</a>
            </li>
          </sec:authorize>
        </ul>
        <form class="d-flex" role="search">
          <!-- Search bar removed -->
        </form>
        <ul class="navbar-nav ms-auto">
          <li class="nav-item">
            <a class="nav-link" href="?lang=pl">pl</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="?lang=en">en</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="?lang=de">de</a>
          </li>
          <sec:authorize access="isAuthenticated()">
            <li class="nav-item">
              <a class="nav-link" href="javascript:formSubmit()">Logout</a>
            </li>
          </sec:authorize>
        </ul>
      </div>
    </div>
  </nav>
</header>


<div class="container">
  <h3><spring:message code="label.carList"/></h3>
  <div class="car-list-container">
    <c:if test="${!empty appCarList}">
      <c:forEach items="${appCarList}" var="appCar">
        <div class="car-card">
          <img src="${appCar.picture}" alt="Car Image" class="car-image">
          <div class="car-details">
            <h5>${appCar.brandName} ${appCar.modelName}</h5>
            <div class="car-details-line">
              <span><spring:message code="label.bodyType"/>: </span>${appCar.bodyType}
              <span class="car-details-spacing"><spring:message code="label.productionYear"/>: </span>${appCar.productionYear}
              <span class="car-details-spacing"><spring:message code="label.carColor"/>: </span>${appCar.carColor}
            </div>
            <div class="car-details-line">
              <span><spring:message code="label.engineSize"/>: </span>${appCar.engineSize}
              <span class="car-details-spacing"><spring:message code="label.mileage"/>: </span>${appCar.mileage}
              <span class="car-details-spacing"><spring:message code="label.power"/>: </span>${appCar.power}
              <span class="car-details-spacing"><spring:message code="label.Vin"/>: </span>${appCar.vin}
            </div>
            <div class="car-price">
              <spring:message code="label.price"/>: ${appCar.price}
            </div>
            <div>
            <sec:authorize access="isAuthenticated()">
              <button class="btn btn-primary btn-sm buy-car-button">Buy Car</button>
            </sec:authorize>
          </div>
          </div>
        </div>
      </c:forEach>
    </c:if>
  </div>
</div>
<script>
  function formSubmit() {
    document.getElementById("logoutForm").submit();
  }
</script>

<!-- csrf for log out-->
<form action="/logout" method="post" id="logoutForm">
  <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
</form>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>
</body>
</html>
