minor changes

templates/wishlist/new.html.twig

 {% extends 'base.html.twig' %}
 
-{% block title %}Item{% endblock %}
+{% block title %}Create New Wishlist{% endblock %}
 
 {% block stylesheets %}
     {{ parent() }}
@@ -16,43 +16,81 @@
             max-width: 800px;
             margin: auto;
         }
-        table {
-            width: 100%;
-            background: rgba(255, 255, 255, 0.15);
-            border-collapse: collapse;
-            margin-top: 20px;
+        .wishlist-form {
+            max-width: 600px;
+            margin: 0 auto;
+            padding: 20px;
+            background: rgba(255, 255, 255, 0.2);
             border-radius: 10px;
-            overflow: hidden;
+            border: 2px solid #99CC33;
             box-shadow: 0 4px 8px rgba(0,0,0,0.2);
             backdrop-filter: blur(10px);
         }
-        th, td {
-            padding: 12px;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.3);
-            color: white;
+        .form-group {
+            margin-bottom: 1.5rem;
+            text-align: left;
         }
-        th {
-            background-color: rgba(153, 204, 51, 0.7);
+        .form-label {
+            display: block;
+            margin-bottom: 0.5rem;
+            font-weight: bold;
         }
-        a.button-link {
-            display: inline-block;
-            margin: 10px;
-            padding: 10px 20px;
-            text-decoration: none;
-            border-radius: 6px;
+        .form-control {
+            width: 100%;
+            padding: 0.5rem;
             border: 2px solid #99CC33;
+            border-radius: 4px;
+            font-size: 1rem;
+        }
+        .form-check {
+            display: flex;
+            align-items: center;
+            margin-top: 1rem;
+        }
+        .form-check-input {
+            margin-right: 0.5rem;
+        }
+        .btn {
+            padding: 0.5rem 1rem;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 1rem;
+        }
+        .btn-primary {
+            background-color: white;
+            color: #00B8DE;
+            border: 2px solid #00B8DE;
+            transition: 0.3s;
+        }
+        .btn-primary:hover {
+            background-color: #99CC33;
+            color: white;
+            border-color: #99CC33;
+        }
+        .btn-secondary {
             background-color: white;
             color: #99CC33;
-            transition: all 0.3s;
+            border: 2px solid #99CC33;
+            transition: 0.3s;
         }
-        a.button-link:hover {
+        .btn-secondary:hover {
             background-color: #00B8DE;
             color: white;
             border-color: #00B8DE;
         }
+        .form-help {
+            font-size: 0.8rem;
+            color: #e0e0e0;
+            margin-top: 0.25rem;
+        }
+        .error-message {
+            color: #dc3545;
+            font-size: 0.875rem;
+            margin-top: 0.25rem;
+        }
         @media (max-width: 768px) {
-            table, th, td {
-                font-size: 0.9rem;
+            .wishlist-form {
+                width: 90%;
             }
         }
     </style>
@@ -60,40 +98,34 @@
 
 {% block body %}
     <div class="container">
-        <h1>Item Details</h1>
+        <h1 class="my-4">Create New Wishlist</h1>
+        
+        {{ form_start(form, {'attr': {'class': 'wishlist-form'}}) }}
+            <div class="form-group">
+                {{ form_label(form.name) }}
+                {{ form_widget(form.name, {'attr': {'class': 'form-control'}}) }}
+                {{ form_errors(form.name) }}
+                <small class="form-help">Give your wishlist a descriptive name</small>
+            </div>
 
-        <table>
-            <tbody>
-                <tr>
-                    <th>Id</th>
-                    <td>{{ item.id }}</td>
-                </tr>
-                <tr>
-                    <th>Title</th>
-                    <td>{{ item.title }}</td>
-                </tr>
-                <tr>
-                    <th>Description</th>
-                    <td>{{ item.description }}</td>
-                </tr>
-                <tr>
-                    <th>Url</th>
-                    <td>{{ item.url }}</td>
-                </tr>
-                <tr>
-                    <th>Image</th>
-                    <td><img src="{{ asset('uploads/' ~ item.image) }}" alt="{{ item.title }}" style="max-width: 100px; border-radius: 8px;"></td>
-                </tr>
-                <tr>
-                    <th>Price</th>
-                    <td>{{ item.price }} €</td>
-                </tr>
-            </tbody>
-        </table>
+            <div class="form-group">
+                {{ form_label(form.deadline) }}
+                {{ form_widget(form.deadline, {'attr': {'class': 'form-control'}}) }}
+                {{ form_errors(form.deadline) }}
+                <small class="form-help">Optional - set a deadline for this wishlist</small>
+            </div>
 
-        <a href="{{ path('app_item_index') }}" class="button-link">Back to list</a>
-        <a href="{{ path('app_item_edit', {'id': item.id}) }}" class="button-link">Edit</a>
+            <div class="form-check">
+                {{ form_widget(form.isDisabled, {'attr': {'class': 'form-check-input'}}) }}
+                {{ form_label(form.isDisabled) }}
+                {{ form_errors(form.isDisabled) }}
+            </div>
+            <small class="form-help">Disabled wishlists won't be visible to others</small>
 
-        {{ include('item/_delete_form.html.twig') }}
+            <div class="form-group mt-4">
+                <button type="submit" class="btn btn-primary">Create Wishlist</button>
+                <a href="{{ path('app_wishlist_index') }}" class="btn btn-secondary ml-2">Cancel</a>
+            </div>
+        {{ form_end(form) }}
     </div>
 {% endblock %}