{% extends 'lara_django_base/lara_base.html' %}
{% block content %}
<div class="mx-auto max-w-5xl p-6">
  <div class="bg-white border rounded-lg p-6 shadow-sm">
    <h1 class="text-2xl font-semibold mb-6">Create Project</h1>
    <form method="post" class="space-y-6">
      {% csrf_token %}

      <!-- Row: title/name_display -->
      <div class="grid grid-cols-12 gap-4">
        <div class="col-span-12">
          <label for="{{ form.name_display.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-1">Title</label>
          {{ form.name_display }}
          {% if form.name_display.help_text %}<p class="mt-1 text-xs text-gray-500">{{ form.name_display.help_text }}</p>{% endif %}
          {% for e in form.name_display.errors %}<p class="mt-1 text-xs text-red-600">{{ e }}</p>{% endfor %}
        </div>
      </div>

      <!-- Row: namespace / name -->
      <div class="grid grid-cols-12 gap-4">
        <div class="col-span-12 md:col-span-5">
          <label for="{{ form.namespace.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-1">Namespace</label>
          {{ form.namespace }}
          {% for e in form.namespace.errors %}<p class="mt-1 text-xs text-red-600">{{ e }}</p>{% endfor %}
        </div>
        <div class="col-span-12 md:col-span-7">
          <label for="{{ form.name.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-1">Name</label>
          {{ form.name }}
          {% for e in form.name.errors %}<p class="mt-1 text-xs text-red-600">{{ e }}</p>{% endfor %}
        </div>
      </div>

      <!-- Row: parent -->
      <div class="grid grid-cols-12 gap-4">
        <div class="col-span-12 md:col-span-4 md:ml-auto">
          <label for="{{ form.parent.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-1">Parent</label>
          {{ form.parent }}
          {% for e in form.parent.errors %}<p class="mt-1 text-xs text-red-600">{{ e }}</p>{% endfor %}
        </div>
      </div>

      <!-- Row: entities / groups -->
      <div class="grid grid-cols-12 gap-4">
        <div class="col-span-12 md:col-span-6">
          <label for="{{ form.entities.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-1">Entities</label>
          {{ form.entities }}
          {% for e in form.entities.errors %}<p class="mt-1 text-xs text-red-600">{{ e }}</p>{% endfor %}
        </div>
        <div class="col-span-12 md:col-span-6">
          <label for="{{ form.groups.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-1">Groups</label>
          {{ form.groups }}
          {% for e in form.groups.errors %}<p class="mt-1 text-xs text-red-600">{{ e }}</p>{% endfor %}
        </div>
      </div>

      <!-- Row: experiments -->
      <div>
        <label for="{{ form.experiments.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-1">Experiments</label>
        {{ form.experiments }}
        {% for e in form.experiments.errors %}<p class="mt-1 text-xs text-red-600">{{ e }}</p>{% endfor %}
      </div>

      <!-- Row: status and dates -->
      <div class="grid grid-cols-12 gap-4">
        <div class="col-span-12 md:col-span-3">
          <label for="{{ form.status.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-1">Status</label>
          {{ form.status }}
          {% for e in form.status.errors %}<p class="mt-1 text-xs text-red-600">{{ e }}</p>{% endfor %}
        </div>
        <div class="col-span-12 md:col-span-3">
          <label for="{{ form.datetime_start.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-1">Start</label>
          {{ form.datetime_start }}
          {% for e in form.datetime_start.errors %}<p class="mt-1 text-xs text-red-600">{{ e }}</p>{% endfor %}
        </div>
        <div class="col-span-12 md:col-span-3">
          <label for="{{ form.datetime_added.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-1">Added</label>
          {{ form.datetime_added }}
          {% for e in form.datetime_added.errors %}<p class="mt-1 text-xs text-red-600">{{ e }}</p>{% endfor %}
        </div>
        <div class="col-span-12 md:col-span-3">
          <label for="{{ form.datetime_end.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-1">End</label>
          {{ form.datetime_end }}
          {% for e in form.datetime_end.errors %}<p class="mt-1 text-xs text-red-600">{{ e }}</p>{% endfor %}
        </div>
      </div>

      <!-- Row: description -->
      <div>
        <label for="{{ form.description.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-1">Description</label>
        {{ form.description }}
        {% for e in form.description.errors %}<p class="mt-1 text-xs text-red-600">{{ e }}</p>{% endfor %}
      </div>

      <!-- Row: remarks -->
      <div>
        <label for="{{ form.remarks.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-1">Remarks</label>
        {{ form.remarks }}
        {% for e in form.remarks.errors %}<p class="mt-1 text-xs text-red-600">{{ e }}</p>{% endfor %}
      </div>

      <!-- Row: resources_external -->
      <div>
        <label for="{{ form.resources_external.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-1">External resources</label>
        {{ form.resources_external }}
        {% for e in form.resources_external.errors %}<p class="mt-1 text-xs text-red-600">{{ e }}</p>{% endfor %}
      </div>

      <!-- Row: iri / pid -->
      <div class="grid grid-cols-12 gap-4">
        <div class="col-span-12 md:col-span-6">
          <label for="{{ form.iri.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-1">IRI</label>
          {{ form.iri }}
          {% for e in form.iri.errors %}<p class="mt-1 text-xs text-red-600">{{ e }}</p>{% endfor %}
        </div>
        <div class="col-span-12 md:col-span-6">
          <label for="{{ form.pid.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-1">PID</label>
          {{ form.pid }}
          {% for e in form.pid.errors %}<p class="mt-1 text-xs text-red-600">{{ e }}</p>{% endfor %}
        </div>
      </div>

      <!-- Row: hash / acl -->
      <div class="grid grid-cols-12 gap-4">
        <div class="col-span-12 md:col-span-6">
          <label for="{{ form.hash_sha256.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-1">SHA256</label>
          {{ form.hash_sha256 }}
          {% for e in form.hash_sha256.errors %}<p class="mt-1 text-xs text-red-600">{{ e }}</p>{% endfor %}
        </div>
        <div class="col-span-12">
          <label for="{{ form.acl.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-1">ACL</label>
          {{ form.acl }}
          {% for e in form.acl.errors %}<p class="mt-1 text-xs text-red-600">{{ e }}</p>{% endfor %}
        </div>
      </div>

      <div class="flex justify-end">
        <button type="submit" class="inline-flex items-center px-4 py-2 text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
          Create
        </button>
      </div>
    </form>
  </div>
</div>
{% endblock %}