{% load custom_tags_and_filters %}
{% with account=projects.0.account account_billing_details=projects.0.account.accountbillingdetails %}
    <div id="account_edit_button_{{ account.id }}" style="display: inline; margin-left: 10px">
        {% url 'invoices_edit_account' account.id as edit_account_url %}
        {% button type="edit" size="xsmall" style="vertical-align: 50%" value="Edit" url=edit_account_url %}
    </div>
    <div id="account_{{ account.id }}_billing_details" style="display: none">
        {% if account_billing_details %}
            <div>
                <span class="control-label">Invoice Configuration:</span>
                <span class="grey">{{ account_billing_details.invoice_configuration }}</span>
            </div>
        {% endif %}
    </div>
    <script>
		const account_h2 = $("div h2:has(form)");
		let account_edit_button_{{ account.id }} = document.getElementById('account_edit_button_{{ account.id }}');
        account_h2.append(account_edit_button_{{ account.id }});
		let account_billing_detail_{{ account.id }} = document.getElementById('account_{{ account.id }}_billing_details');
		account_h2.after(account_billing_detail_{{ account.id }});
		$(account_billing_detail_{{ account.id }}).show();
    </script>
{% endwith %}
{% 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 project_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(project_edit_button_{{ project.id }}, null);
			let project_billing_detail_{{ project.id }} = document.getElementById('project_{{ project.id }}_billing_details');
			$('#project_{{ project.id }}_details div:eq(0)').after(project_billing_detail_{{ project.id }});
			$(project_billing_detail_{{ project.id }}).show();
        </script>
    {% endwith %}
{% endfor %}