<!doctype html>
<html lang="en" class="antialiased">
<head>
    <title>CookBook</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="/css/style.css" rel="stylesheet" />
</head>
<body class="bg-gray-100 text-gray-900 tracking-wider leading-normal">
    <div id="recipients" class="p-8 mt-6 lg:mt-0 rounded shadow bg-white">
        <a class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded" href="/">Back</a>
        <section class="container mx-auto">
            <div class="md:flex md:items-center mb-6">
                <div class="md:w-1/4">
                    <h1 class="text-xl text-gray-900 leading-tight py-8">
                        {% if recipe %}
                        Edit
                        {% else %}
                        Create new recipe
                        {% endif %}
                    </h1>
                </div>
                <div class="md:w-3/4">
                    {% if recipe %}
                        <div class="text-right">
                            <form action="/recipe/delete/{{ recipe.id }}" method="post">
                                <button class="shadow bg-red-500 hover:bg-red-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded" type="submit">
                                    Delete
                                </button>
                            </form>
                        </div>
                    {% endif %}
                </div>
            </div>
            <form class="w-full" action="{% if recipe %}/recipe/edit/{{ recipe.id }} {% else %} /recipe/create {% endif %}" method="post">
                <div class="md:flex md:items-center mb-6">
                    <div class="md:w-1/4">
                    <label class="block text-gray-500 font-bold mb-1 md:mb-0 pr-4" for="inline-name">
                        Name
                    </label>
                    </div>
                    <div class="md:w-3/4">
                    <input class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" name="name" id="inline-name" type="text" value="{{ recipe.name }}">
                    </div>
                </div>
                <div class="md:flex md:items-center mb-6">
                    <div class="md:w-1/4">
                    <label class="block text-gray-500 font-bold mb-1 md:mb-0 pr-4" for="inline-total-time">
                        Total Time
                    </label>
                    </div>
                    <div class="md:w-3/4">
                    <input class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" name="totalTime" id="inline-total-time" type="text" value="{{ recipe.totalTime }}">
                    </div>
                </div>
                <div class="md:flex md:items-center mb-6">
                    <div class="md:w-1/4">
                    <label class="block text-gray-500 font-bold mb-1 md:mb-0 pr-4" for="inline-servings">
                        Servings
                    </label>
                    </div>
                    <div class="md:w-3/4">
                    <input class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" name="servings" id="inline-servings" type="text" value="{{ recipe.servings }}">
                    </div>
                </div>
                <div class="md:flex md:items-center mb-6">
                    <div class="md:w-1/4">
                    <label class="block text-gray-500 font-bold mb-1 md:mb-0 pr-4" for="inline-ingredients">
                        Ingredients
                    </label>
                    </div>
                    <div class="md:w-3/4">
                        <textarea class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" name="ingredients" id="inline-ingredients" rows="10">{{ recipe.ingredients }}</textarea>
                    </div>
                </div>
                <div class="md:flex md:items-center mb-6">
                    <div class="md:w-1/4">
                    <label class="block text-gray-500 font-bold mb-1 md:mb-0 pr-4" for="inline-method">
                        Method
                    </label>
                    </div>
                    <div class="md:w-3/4">
                        <textarea class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" name="method" id="inline-method" rows="10">{{ recipe.method }}</textarea>
                    </div>
                </div>
                <div class="md:flex md:items-center">
                    <div class="md:w-1/4"></div>
                    <div class="md:w-2/4">
                        <button class="shadow bg-purple-500 hover:bg-purple-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded" type="submit">
                            {% if recipe %}
                                Update
                            {% else %}
                                Create
                            {% endif %}
                        </button>
                    </div>
                </div>
            </form>
        </section>
    </div>
</body>
</html>