{% extends 'core/base.html' %}
{% load currency_filters %}
{% block content %}
  <article>
    <h1 class="font-bold rounded-xl border-2 border-gray-200 bg-slate-100 mb-3 ml-3 mr-3 p-4 text-lg">{{ task.title }}</h1>
<section class="rounded-xl border-2 border-gray-200 bg-slate-100 mb-3 ml-3 mr-3 p-4">
    <p>{{ task.description }}</p>
    
    <p>From: {{ task.price_from|cents_to_dollars }} To: {{ task.price_to|cents_to_dollars }}</p>
</section>


<section class="rounded-xl border-2 border-gray-200 bg-slate-100 mb-3 ml-3 mr-3 p-4">
  <form class="">
  <div class="flex flex-wrap -mx-3 mb-6">
    <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
      <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-first-name">
        First Name
      </label>
      <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" id="grid-first-name" type="text" placeholder="Jane">
      <p class="text-red-500 text-xs italic">Please fill out this field.</p>
    </div>
  </div>
  <div class="flex flex-wrap -mx-3 mb-6">
    <div class="w-full md:w-1/2 px-3">
      <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-last-name">
        Last Name
      </label>
      <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="grid-last-name" type="text" placeholder="Doe">
    </div>
  </div>
  <div class="flex flex-wrap -mx-3 mb-2">
    <div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
      <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-city">
        City
      </label>
      <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="grid-city" type="text" placeholder="Albuquerque">
    </div>
  </div>
</form>
</section>



</article>

{% endblock %}