{% extends "base.html" %}
{% load static %}
{% block css %}
  <style>
      .widgetcocktail {
          border: 2px solid black;
          border-radius: 20px;
          text-transform: uppercase;
          font-family: 'Faster One', cursive;
          color: black;
          margin: auto;
      }
      img {
          border-radius: 50px;
          max-width: 100%;
      }
  </style>
  <link rel="stylesheet" href="{% static 'css/navbar_style.css' %}">
  <link href="https://fonts.googleapis.com/css2?family=Faster+One&display=swap" rel="stylesheet"> 
{% endblock css %}


{% block title %}
COCKTAIL  | {{ cocktail.nome_cocktail }}
{% endblock title %}

{% block content %}
<div class="widgetcocktail">
    <div class="text-center"><h3>{{ cocktail.nome_cocktail }}</h3></div>
    <div class="row"><img src="{{ cocktail.immagine_cocktail.url }}" class="img-fluid mx-auto" alt="{{ cocktail.nome_cocktail }}"></div>
    <p class="text-center">{{ cocktail.ingredienti.all|join:"," }}</p>
</div>
{% endblock content %}