{% extends 'base.html' %}

{% load static %}

{% load project_templatetags %}

{% block title %}Attach Bucket to Project{% endblock %}

{% block local_js_top %}
<script src="{% static 'environment/js/cookie.js' %}"></script>
<script src="{% static 'environment/js/forms.js' %}"></script>
{% endblock %}

{% block local_css %}
<link rel="stylesheet" type="text/css" href="{% static 'environment/css/environment-base.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'environment/css/creation_form.css' %}">
{% endblock %}

{% block content %}
<div class="container">
  {% include "message_snippet.html" %}
    <h1 class="mb-4">
      Attach Bucket to Project
    </h1>
    <div class="container-body">
      <div class="card" style="width: 36rem;">
        <div class="card-body">
          <form class="single-submit-form" action="{% url 'attach_bucket_to_project' %}" method="post" style="width: 24rem;">
            {% csrf_token %}
            
            {% if form.non_field_errors %}
              <div class="alert alert-danger">
                {% for error in form.non_field_errors %}
                  {{ error }}
                {% endfor %}
              </div>
            {% endif %}
            
            {% for field in form %}
              <div class="form-group">
                <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                {{ field }}
                {% if field.help_text %}
                  <small class="form-text text-muted">{{ field.help_text|safe }}</small>
                {% endif %}
                {% if field.errors %}
                  <div class="invalid-feedback d-block">
                    {% for error in field.errors %}
                      {{ error }}
                    {% endfor %}
                  </div>
                {% endif %}
              </div>
            {% endfor %}
            
            <button class="btn btn-primary mt-3" type="submit">
              Attach bucket
            </button>
          </form>
        </div>
      </div>
    </div>
</div>
{% endblock %}