{% extends "layout.html" %}
{% block content %}
<div class="container-fluid" style="{{ theme.userInputFormColor }}">
    <div class="container py-2">
        <div class="row">
            <div class="col-lg-4">
                <div class="card mb-4">
                    <div class="card-body text-center">
                        <h4 class="card-title">{{ projectName }}</h4>
                        <h6 class="card-subtitle mb-2 text-muted">ID: {{ projectId }}</h6>
                        <img src={{ image_file }} alt="avatar" class="rounded-circle img-fluid" style="width: 150px;">
                    </div>
                </div>
                <div class="card mb-4 mb-lg-0">
                    <div class="card-body p-0">
                        <ul class="list-group list-group-flush rounded-3">
                            {% for note in notes %}
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title"> <a href="#">{{ note.title }} |{{ note.project_note_status }}| </a> </h5>
                                    <h6 class="card-subtitle mb-2 text-muted">Posted: {{ note.date_posted.strftime('%d-%m-%Y') }} | Due: {{ note.date_due.strftime('%d-%m-%Y')}}</h6>
                                    <p class="card-text">{{ note.content }}</p>
                                </div>
                            </div>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-8">
                <div class="card mb-4">
                    <form class="card-body" method="POST" action="">
                        {{ form.hidden_tag() }}
                        <div class="form-goup row">
                            <div class="col-sm-2">
                                Name
                            </div>
                            <div class="col">
                                {{ projectName }}
                            </div>
                        </div>
                        <div class="form-goup row">
                            {{ form.description.label(class="col-sm-2 col-form-label") }}
                            <div class="col-sm-10">
                                {% if form.description.errors %}
                                {{ form.description( class="form-control is-invalid") }}
                                <div class="invalid-feedback">
                                    {% for error in form.description.errors %}
                                    <span>{{ error }}</span>
                                    {% endfor %}
                                </div>
                                {% else %}
                                {{ form.description( class="form-control") }}
                                {% endif %}
                            </div>
                        </div>
                        <div class="form-goup row">
                            {{ form.industry.label(class="col-sm-2 col-form-label") }}
                            <div class="col-sm-10">
                                {% if form.industry.errors %}
                                {{ form.industry( class="form-control is-invalid") }}
                                <div class="invalid-feedback">
                                    {% for error in form.industry.errors %}
                                    <span>{{ error }}</span>
                                    {% endfor %}
                                </div>
                                {% else %}
                                {{ form.industry( class="form-control") }}
                                {% endif %}
                            </div>
                        </div>
                        <div class="form-goup row">
                            {{ form.status.label(class="col-sm-2 col-form-label") }}
                            <div class="col-sm-10">
                                {% if form.status.errors %}
                                {{ form.status( class="form-control is-invalid") }}
                                <div class="invalid-feedback">
                                    {% for error in form.status.errors %}
                                    <span>{{ error }}</span>
                                    {% endfor %}
                                </div>
                                {% else %}
                                {{ form.status( class="form-control") }}
                                {% endif %}
                            </div>
                        </div>
                        <hr>
                        <div class="form-goup row">
                            {{ form.responsible.label(class="col-sm-2 col-form-label") }}
                            <div class="col-sm-10">
                                {% if form.responsible.errors %}
                                {{ form.responsible( class="form-control is-invalid") }}
                                <div class="invalid-feedback">
                                    {% for error in form.responsible.errors %}
                                    <span>{{ error }}</span>
                                    {% endfor %}
                                </div>
                                {% else %}
                                {{ form.responsible( class="form-control") }}
                                {% endif %}
                            </div>
                        </div>
                        <hr>
                        <div class="form-goup row text-center">
                            <div class="col">
                                {{ form.qtePrototype.label(class="col-form-label") }}
                                <div class="col">
                                    {% if form.qtePrototype.errors %}
                                    {{ form.qtePrototype( class="form-control is-invalid") }}
                                    <div class="invalid-feedback">
                                        {% for error in form.qtePrototype.errors %}
                                        <span>{{ error }}</span>
                                        {% endfor %}
                                    </div>
                                    {% else %}
                                    {{ form.qtePrototype( class="form-control") }}
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col">
                                {{ form.qteStart.label(class="col-form-label") }}
                                <div class="col">
                                    {% if form.qteStart.errors %}
                                    {{ form.qteStart( class="form-control is-invalid") }}
                                    <div class="invalid-feedback">
                                        {% for error in form.qteStart.errors %}
                                        <span>{{ error }}</span>
                                        {% endfor %}
                                    </div>
                                    {% else %}
                                    {{ form.qteStart( class="form-control") }}
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col">
                                {{ form.qteProduction.label(class="col-form-label") }}
                                <div class="col">
                                    {% if form.qteProduction.errors %}
                                    {{ form.qteProduction( class="form-control is-invalid") }}
                                    <div class="invalid-feedback">
                                        {% for error in form.qteProduction.errors %}
                                        <span>{{ error }}</span>
                                        {% endfor %}
                                    </div>
                                    {% else %}
                                    {{ form.qteProduction( class="form-control") }}
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        <div class="form-goup row text-center">
                            <div class="col">
                                {{ form.datePrototype.label(class="col-form-label") }}
                                <div class="col">
                                    {% if form.datePrototype.errors %}
                                    {{ form.datePrototype( class="form-control is-invalid") }}
                                    <div class="invalid-feedback">
                                        {% for error in form.datePrototype.errors %}
                                        <span>{{ error }}</span>
                                        {% endfor %}
                                    </div>
                                    {% else %}
                                    {{ form.datePrototype( class="form-control") }}
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col">
                                {{ form.dateStart.label(class="col-form-label") }}
                                <div class="col">
                                    {% if form.dateStart.errors %}
                                    {{ form.dateStart( class="form-control is-invalid") }}
                                    <div class="invalid-feedback">
                                        {% for error in form.dateStart.errors %}
                                        <span>{{ error }}</span>
                                        {% endfor %}
                                    </div>
                                    {% else %}
                                    {{ form.dateStart( class="form-control") }}
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col">
                                {{ form.dateProduction.label(class="col-form-label") }}
                                <div class="col">
                                    {% if form.dateProduction.errors %}
                                    {{ form.dateProduction( class="form-control is-invalid") }}
                                    <div class="invalid-feedback">
                                        {% for error in form.dateProduction.errors %}
                                        <span>{{ error }}</span>
                                        {% endfor %}
                                    </div>
                                    {% else %}
                                    {{ form.dateProduction( class="form-control") }}
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <hr>
                            {{ form.submit(class="btn btn-outline-info") }}
                            <hr>
                        </div>
                    </form>
                    <div class="card-body p-2">
                        <h4 class="title"> Project Elements </h4>
                        <table class="{{ theme.tableClass }}">
                            <thead>
                                <tr>
                                    <th scope="col">Name</th>
                                    <th scope="col">Description</th>
                                    <th scope="col">Qte/Project</th>
                                    <th scope="col">To ship</th>
                                    <th scope="col">Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for item in elements %}
                                <tr>
                                    <th scope="row"><a href=" {{url_for('project.show_element', elementId = item.id)}}">{{ item.name }}<a></th>
                                    <td>{{ item.description }}</td>
                                    <td>{{ item.qte_per_project }}</td>
                                    <td>{{ item.company_ship_to.name }} {{item.company_ship_to.company_country.name }}</td>
                                    <td>{{ item.element_status.name }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table> 
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



{% endblock content %}