{% extends "layout.html" %}

{% block content %}
<div class="container-fluid pt-2">
    <div class="container-fluid" style="{{ theme.homeOverviewBgColor  }}">
    <h1 class="text-center"> Overwiev </h1>
        <div class="col">
            <h3> <a href="#">Companies</a> </h3>
            <table class="{{ theme.tableClass }}">
                <thead>
                    <tr>
                        <th scope="col">Company</th>
                        <th scope="col">Country</th>
                        <th scope="col">Website</th>
                        <th scope="col">Relation</th>
                        <th scope="col">Industry</th>
                        <th scope="col">Status</th>
                        <th scope="col">ID</th>
                    </tr>
                </thead>
                <tbody>
                    {% for company in companies %}
                    <tr>
                        <th scope="row">{{ company.name }} {{ company.legal_entity}}</th>
                        <td>{{ company.country_bill}}</td>
                        <td> <a href="http://{{ company.website }}/" target="_blank" rel="noopener noreferrer">{{ company.website}} </a> </td>
                        <td>{{ company.relation}}</td>
                        <td>{{ company.company_industry}}</td>
                        <td>{{ company.status}}</td>
                        <td>{{ company.id}}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table> 
        </div>

        <div class="col">
            <h3> <a href="#">Notes</a> </h3>
            <table class="{{ theme.tableClass }}">
                <thead>
                    <tr>
                        <th scope="col">Company</th>
                        <th scope="col">Title</th>
                        <th scope="col">Content</th>
                        <th scope="col">Status</th>
                        <th scope="col">Priority</th>
                        <th scope="col">Date Posted</th>
                        <th scope="col">Due Date</th>
                    </tr>
                </thead>
                <tbody>
                    {% for elem in companie_notes %}
                    <tr>
                        <th scope="row">{{ elem.company.name }}</th>
                        <td>{{ elem.title }}</td>
                        <td>{{ elem.content  }}</td>
                        <td>{{ elem.company_note_status }}</td>
                        <td>{{ elem.priority }}</td>
                        <td>{{ elem.date_posted.strftime('%d-%m-%Y') }}</td>
                        <td>{{ elem.date_due.strftime('%d-%m-%Y') }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table> 
        </div>
        

        <div class="col">
            <h3> <a href="#">Notes</a> </h3>
            <table class="{{ theme.tableClass }}">
                <thead>
                    <tr>
                        <th scope="col">Person</th>
                        <th scope="col">Title</th>
                        <th scope="col">Content</th>
                        <th scope="col">Status</th>
                        <th scope="col">Priority</th>
                        <th scope="col">Date Posted</th>
                        <th scope="col">Due Date</th>
                    </tr>
                </thead>
                <tbody>
                    {% for elem in person_notes %}
                    <tr>
                        <th scope="row">{{ elem.person.name }}</th>
                        <td>{{ elem.title }}</td>
                        <td>{{ elem.content  }}</td>
                        <td>{{ elem.person_note_status }}</td>
                        <td>{{ elem.priority }}</td>
                        <td>{{ elem.date_posted.strftime('%d-%m-%Y') }}</td>
                        <td>{{ elem.date_due.strftime('%d-%m-%Y') }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table> 
        </div>


    </div>
{% endblock content %}