{%extends "rolodex/base.html" %}
{%load staticfiles%}
{%block head%}

<link rel="stylesheet" type="text/css" href="{% static 'rolodex/css/new_entity.css'%}">

{%endblock%}

{%block content%}

{% if edit %}
    <h1>{{orgNode.orgName}}</h1>
{% else %}
	<h1>New Org</h1>
{% endif %}

<div id="midrail">
<div class="formDiv">
<h2>ID</h2>
{% if edit %}
<form action="/rolodex/edit-org/{{orgNode.slug}}/" method="Post">
{% else %}
<form action="/rolodex/add-org/" method="Post">
{% endif %}

{%csrf_token%}
{% if form.errors or formset.errors %}
<div id="form-error">
    <p>Whoops, there was a mistake... Correct it below and try again.</p>
</div>
{%endif%}
<div class="professional addform">
{% if form.errors %}
<div id="form-error">
    <ul>
    <li>{{ form.non_field_errors|striptags }}</li>
    {% for field in form %}
    {%if field.errors%}
    <li>{{field.label}}: {{ field.errors|striptags }}</li>
    {%endif%}
    {% endfor %}
    </ul>
</div>
{% endif %}

<ul class="center">
    <li class="title">Name</li>
    <li class="instruction">The full, official name of the organization <b>without</b> suffix acronyms (LLC, Inc., etc.).</li>
    
    <li class="required">{{form.orgName}}</li>
    <li class="title">Open records law</li>
    <li class="instruction">If a public organization, select the open records law under which requests can be made.</li>
    <li>{{form.openRecordsLaw}}</li>
    <li class="title">Notes</li>
    <li class="entity_notes">{{form.notes}}</li>
</ul>
</div>

<h2>Contacts</h2>
<div class="outside freetext">
    <p class="instruction">Contacts include links to a homepage and social media sites, phone and fax numbers, as well as email and physical addresses. 
</div>

{% load formset_tags %}

<div id="formset" data-formset-prefix="{{ formset.prefix }}">
{{formset.management_form}}

    <div data-formset-body>
        {% for form in formset %}
            <div data-formset-form class="contactsForm addform">
                {% if form.errors %}
                <div id="form-error">
                    <ul>
                    <li>{{ form.non_field_errors|striptags }}</li>
                    {% for field in form %}
                    {%if field.errors%}
                    <li>{{field.label}}: {{ field.errors|striptags }}</li>
                    {%endif%}
                    {% endfor %}
                    </ul>
                </div>
                {% endif %}

                {{ form.id }}
                {{ form.person }}
                {{ form.org }}
                <ul class="contact">
                    <li class="required">Type{{ form.type }}</li>
                    <li class="required">Contact{{ form.contact }}</li>
                    <li><label>Role</label> {{form.role}}</li>
                    <li class="notes">{{ form.notes }}</li>
                    <li class="delete clearfix"><label>{{form.DELETE}}Delete <i class="fa fa-times"></i></label></li>
                </ul>

            </div>
        {% endfor %}
    </div>

<!--FORM TEMPLATE-->
    <script type="form-template" data-formset-empty-form>
        {% escapescript %}

            <div data-formset-form class="contactsForm addform">

                {% if form.errors %}
                <div id="form-error">
                    <ul>
                    <li>{{ form.non_field_errors|striptags }}</li>
                    {% for field in form %}
                    {%if field.errors%}
                    <li>{{field.label}}: {{ field.errors|striptags }}</li>
                    {%endif%}
                    {% endfor %}
                    </ul>
                </div>
                {% endif %}

                {{ formset.empty_form.id }}
                {{ formset.empty_form.person }}
                {{ formset.empty_form.org }}
                <ul class="contact">
                    <li class="required">Type{{ formset.empty_form.type }}</li>
                    <li class="required">Contact{{ formset.empty_form.contact }}</li>
                    <li><label>Role</label> {{formset.empty_form.role}}</li>
                    <li class="notes">{{ formset.empty_form.notes }}</li>
                    <li class="delete clearfix"><label>{{formset.empty_form.DELETE}}Delete <i class="fa fa-times"></i></label></li>

                </ul>

            </div>

        {% endescapescript %}
    </script>

    <!-- This button will add a new form when clicked -->
    <div id="addContact">
    <a data-formset-add><i class="fa fa-plus" ></i> Contact</a>
    </div>

<script>jQuery(function($) {
    $("#formset").formset({
        animateForms: true
    });
});</script>


</div>


<div class="form-actions">
{% if edit %}
    <button type="submit" class="btn btn-primary add-btn"><i class="fa fa-check"></i> Update Org</button>
{% else %}
    <button type="submit" class="btn btn-primary add-btn"><i class="fa fa-plus"></i> Add Org</button>
{% endif %}
</div>

</form>

</div>
</div>


<div class="breadcrumb-container">
<ul class="breadcrumb">
	<li><a href="{% url 'rolodex_home' %}">Home</a></li>
	{%if edit%}
	<li><a href="{%url 'rolodex_org' orgNode.slug%}">{{orgNode.orgName|truncatechars:15}}</a></li>
    <li><a>Edit</a></li>
	{%else%}
    <li><a>Add Org</a></li>
    {%endif%}
</ul>
</div>
{%endblock%}