{% load custom_tags_and_filters %}
{% for project in projects %}
    {% with billing_detail=project.projectbillingdetails %}
        <div id="project_edit_button_{{ project.id }}"
             style="position: relative;
                    display: inline;
                    margin-left: 10px">
            {% url 'invoices_edit_project' project.id as edit_project_url %}
            {% button type="edit" size="xsmall" style="position: absolute" value="Edit" url=edit_project_url %}
        </div>
        <div id="project_{{ project.id }}_billing_details" style="display: none">
            {% if billing_detail.project_name and billing_detail.project_name != billing_detail.project.name %}
                <div>
                    <span class="control-label">Billing name:</span>
                    <span class="grey">{{ billing_detail.project_name }}</span>
                </div>
            {% endif %}
            {% if billing_detail.expires_on %}
                <div>
                    <span class="control-label">Expires:</span>
                    <span class="grey">{{ billing_detail.expires_on|date }}</span>
                </div>
            {% endif %}
            {% if rate_categories %}
                <div>
                    <span class="control-label">Category:</span>
                    <span class="grey">{{ billing_detail.category }}</span>
                </div>
            {% endif %}
            {% if billing_detail.institution %}
                <div>
                    <span class="control-label">Institution:</span>
                    <span class="grey">{{ billing_detail.institution }}</span>
                </div>
            {% endif %}
            {% if billing_detail.department %}
                <div>
                    <span class="control-label">Department:</span>
                    <span class="grey">{{ billing_detail.department }}</span>
                </div>
            {% endif %}
            {% if billing_detail.staff_host %}
                <div>
                    <span class="control-label">Staff host:</span>
                    <span class="grey">{{ billing_detail.staff_host }}</span>
                </div>
            {% endif %}
            <div>
                <span class="control-label">Contact:</span>
                <span class="grey">{{ billing_detail.contact_name|default_if_none:'' }}</span>
            </div>
            <div>
                <span class="control-label">Email:</span>
                <span class="grey">{{ billing_detail.contact_email|join:', ' }}</span>
            </div>
            <div>
                <span class="control-label">Phone:</span>
                <span class="grey">{{ billing_detail.contact_phone|default_if_none:'' }}</span>
            </div>
            {% if billing_detail.no_charge %}
                <div>
                    <span class="control-label">No charge:</span>
                    <span class="grey">Invoices will NOT be created for this project</span>
                </div>
            {% endif %}
            {% if billing_detail.no_tax %}
                <div>
                    <span class="control-label">No tax:</span>
                    <span class="grey">This project is tax exempt</span>
                </div>
            {% endif %}
            {% if "NEMO_billing.cap_discount"|app_installed and billing_detail.no_cap %}
                <div>
                    <span class="control-label">No CAP(s):</span>
                    <span class="grey">This project is excluded from CAP Discount(s)</span>
                </div>
            {% endif %}
            <div>
                <span class="control-label"
                      {% if billing_detail.adressee or not billing_detail.comments %}style="margin-bottom: 0"{% endif %}>
                    Addressee:
                </span>
                <div class="grey" {% if billing_detail.comments %}style="margin-bottom: 5px"{% endif %}>
                    {{ billing_detail.addressee|default_if_none:''|linebreaksbr }}
                </div>
            </div>
            {% if billing_detail.comments %}
                <div>
                    <span class="control-label" style="margin-bottom: 0">Comments:</span>
                    <div class="grey">{{ billing_detail.comments|linebreaksbr }}</div>
                </div>
            {% endif %}
        </div>
        <script>
			let edit_button_{{ project.id }} = document.getElementById('project_edit_button_{{ project.id }}');
			let project_chevron_{{ project.id }} = document.getElementById('project_{{ project.id }}_chevron');
			project_chevron_{{ project.id }}.parentNode.parentNode.insertBefore(edit_button_{{ project.id }}, null);
			let billing_detail_{{ project.id }} = document.getElementById('project_{{ project.id }}_billing_details');
			$('#project_{{ project.id }}_details div:eq(0)').after(billing_detail_{{ project.id }});
			$(billing_detail_{{ project.id }}).show();
		
        </script>
    {% endwith %}
{% endfor %}
