diff --git a/templates/wishlist/new.html.twig b/templates/wishlist/new.html.twig index ce5df679a20c0fef7c6f950055c659dd3a64db6b..db732bbcd22cde1ffd04c5ca258bff0bd8220913 100644 --- a/templates/wishlist/new.html.twig +++ b/templates/wishlist/new.html.twig @@ -1,6 +1,6 @@ {% 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 %}