{% extends "base.html" %}

{% block extra_header %}
{% endblock %}

{% block title%}Home{% endblock %}

{% block center_content %}
    <script>
		window.addEventListener('DOMContentLoaded', (event) => {
            let forms = document.querySelectorAll('form');
            for(let i=0; i< forms.length; i++){
                forms[i].querySelector('input[name="uuid"]').value = uuidv4();
            }
		});
	</script>

    {% if current_user.is_authenticated %}
        <div class="text-right">Logged as <span class="text-success font-italic">{{current_user.name.lstrip('ldap/')}}</span>. 
        <a href="/logout">Logout</a></div>
    {% else %}
        <div class="text-center text-danger">You are not logged in. <a href="/login">Login</a></div>
    {% endif %}
		<div class="table-responsive-sm text-center">
            <table class="table table-striped table-dark table-hover">
                <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">Proposal</th>
                        <!--th scope="col">Summary</th-->
                        <th scope="col">Facility</th>
                        <th scope="col">Instrument</th>
                        <th scope="col">Title</th>
                        <th scope="col">Runs</th>
                        <th scope="col">Action</th>
                    </tr>
                </thead>
                <tbody>
                    {% for proposal in proposals %}
                        <tr>
                            <th scope="row" class="align-middle">{{ loop.index }}</th>
                            <td class="align-middle">{{proposal.investigation.name}}</td>
                            <!--td class="align-middle text-justify">{{proposal.investigation.summary}}</td-->
                            <td class="align-middle">{{proposal.facility[0].Facility.name}}</td>
                            <td class="align-middle">{{proposal.instruments[0].Instrument.name }}</td>
                            <td class="align-middle">{{proposal.investigation.title}}</td>
                            <td class="align-middle">
                                {{ proposal.datasets|length }}
                            </td>
                            <td class="align-middle">
                                <form action="/sans/analysis" method="GET">
                                    <input type="hidden" name="f_id" value="{{proposal.facility[0].Facility.id}}"/>
                                    <input type="hidden" name="i_id" value="{{proposal.instruments[0].Instrument.id}}"/>
                                    <input type="hidden" name="p_id" value="{{proposal.investigation.id}}"/>
                                    <input type="hidden" name="uuid"/>
                                    <button type="submit" class="btn btn-outline-primary">Analysis</button>
                                </form>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

		{% for proposal in proposals %}
			{% for dataset in proposal.datasets  %}
				<!--span>{{dataset.Dataset.name}}, </span-->
			{% endfor %}

		{% endfor %}
{% endblock %}

{% block scripts %}
    <script src="https://cdn.jsdelivr.net/npm/uuid@latest/dist/umd/uuidv4.min.js"></script>
{% endblock %}