{% extends "base/base.html" %}

{% block website_head %}
{% load static %} <!-- Load static files such as CSS, JS, images -->
{% load widget_tweaks %} <!-- Load widget tweaks for customizing form widgets -->
{% load component_tags %}

<title>{{ title }}</title>

<link rel="stylesheet" href="{% static 'seo/css/seo.css' %}">
<link rel="stylesheet" href="{% static 'seo/css/bootstrap_tags.css' %}">

{% endblock website_head %}

{% block website_body %}

<form method="post" class="form" id="backend-form">
    {% csrf_token %}

    <div class="accordion" id="accordionExample">

        <div class="accordion-item">

          <h2 class="accordion-header" id="headingOne">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              Meta Tags
            </button>
          </h2>

          <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">

            <div class="accordion-body">

                {% for field in meta_tags_form %}

                <div class="mb-3 input_group">

                  {% if field.label == "Meta keywords" %}

                    <label class="col-form-label name">{{ field.label }}</label>
                    {% render_field field class="form-control input bootstrap-tagsinput" placeholder="Add a tag..." data-role="tagsinput" aria-hidden="true" required="false" %}

                  {% else %}

                    <label class="col-form-label name">{{ field.label }}</label>
                    {% render_field field class="form-control input" id=field.label autocomplete="off" %}

                  {% endif %}

            
                </div>
            
                {% endfor %}

                <button type="submit" class="btn btn-primary form_submit_button submitButtonJS">Save</button>
            
            </div>

          </div>
        </div>

    </div>

</form>  

{% endblock website_body %}

{% block additional_dom_scripts %}
<script type="module" src="{% static 'seo/js/handle_submitions.js' %}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>
{% endblock additional_dom_scripts %}