{% 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="row">
        <div class="col">
            <h3> <a href="#">Projects</a> </h3>
            <table class="{{ theme.tableClass }}">
                <thead>
                    <tr>
                        <th scope="col">Total</th>
                        <th scope="col">Active</th>
                        <th scope="col">Inactive</th>
                        <th scope="col">ToDo</th>
                        <th scope="col">Warning</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">239</th>
                        <td>200</td>
                        <td>39</td>
                        <td>58</td>
                        <td>5</td>
                    </tr>
                </tbody>
            </table> 
        </div>
        <div class="col">
            <h3> <a href="#">Components</a> </h3>
            <table class="{{ theme.tableClass }}">
                <thead>
                    <tr>
                        <th scope="col">Total</th>
                        <th scope="col">Accepted</th>
                        <th scope="col">Declined</th>
                        <th scope="col">Closed</th>
                        <th scope="col">Warning</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">239</th>
                        <td>200</td>
                        <td>39</td>
                        <td>58</td>
                        <td>5</td>
                    </tr>
                </tbody>
            </table> 
        </div>
        <div class="col">
            <h3> <a href="#">Economics</a> </h3>
            <table class="{{ theme.tableClass }}">
                <thead>
                    <tr>
                        <th scope="col">Total POS</th>
                        <th scope="col">Max Marg</th>
                        <th scope="col">Min Marg</th>
                        <th scope="col">Avg Marg</th>
                        <th scope="col">Total Rev</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">100'000 CHF</th>
                        <td>35 %</td>
                        <td>12 %</td>
                        <td>23 %</td>
                        <td>12'453 CHF</td>
                    </tr>
                </tbody>
            </table> 
        </div>
    </div>
</div>

<div class="container-fluid pt-2" style="{{ theme.homeNewsBgColor  }}">
    <h1 class="text-center"> News </h1>
    <div class="row">
        <div class="col">
            <h3> <a href="#">Last News</a> </h3>
            <table class="{{ theme.tableClass }}">
                <thead>
                    <tr>
                        <th scope="col">Date <a href="#">&#x25B2;</a></th>
                        <th scope="col">Author</th>
                        <th scope="col">Client</th>
                        <th scope="col">Content</th>
                        <th scope="col">Due-Date</th>
                        <th scope="col">Uregncy<a href="#"> &#x25B2;&#x25BC;</a></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">08.08.23</th>
                        <td>Kerem Yollu</td>
                        <td>Steinel</td>
                        <td>Please Call Stefan concerning the Stm32f0313 delivery that won't be made in time Chris Straub from st is informed</td>
                        <td>16.08.23</td>
                        <td>Normal</td>
                    </tr>
                </tbody>
            </table> 
        </div>
    </div>
</div>

<div class="container-fluid pt-2>
<div class="container-fluid" style="{{ theme.homeSearchBgColor  }}">
    <h1 class="text-center"> Quick Sreach </h1>
    <div class="row">
        <div class="col">
            <h3> <a href="#">Contacts</a> </h3>
            <table class="{{ theme.tableClass }}">
                <thead>
                    <tr>
                        <th scope="col">Name</th>
                        <th scope="col">Company</th>
                        <th scope="col">Mail</th>
                        <th scope="col">Tel</th>
                        <th scope="col">Address</th>
                    </tr>
                </thead>
                <tbody>
                    <tr> <th scope="row">Stefan Walker</th>
                        <td>Steinel</td>
                        <td>stefan.walker@steinel.com</td>
                        <td>+41554182111</td>
                        <td>Allmeindstrasse 10, 8840 Einsiedeln</td>
                    </tr>
                </tbody>
            </table> 
        </div>
        <div class="col">
            <h3> <a href="#">Projects</a> </h3>
            <table class="{{ theme.tableClass }}">
                <thead>
                    <tr>
                        <th scope="col">Name</th>
                        <th scope="col">Customer</th>
                        <th scope="col">Customer Resp.</th>
                        <th scope="col">Kynsight Resp.</th>
                        <th scope="col">Date Created</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">STWH-HS</th>
                        <td>Steinel</td>
                        <td>Stefan Walker</td>
                        <td>Kerem Yollu</td>
                        <td>01.02.2018</td>
                    </tr>
                </tbody>
            </table> 
        </div>
        <div class="col">
            <h3> <a href="#">Components</a> </h3>
            <table class="{{ theme.tableClass }}">
                <thead>
                    <tr>
                        <th scope="col">Art.</th>
                        <th scope="col">Manufacturer</th>
                        <th scope="col">Desing In</th>
                        <th scope="col">MDQ</th>
                        <th scope="col">MOQ</th>
                        <th scope="col">MPQ</th>
                        <th scope="col">Price</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">STM32F032G6T6Q</th>
                        <td>StMicroelectronics</td>
                        <td>YES</td>
                        <td>1000</td>
                        <td>500</td>
                        <td>250</td>
                        <td>1.2 USD</td>
                    </tr>
                </tbody>
            </table> 
        </div>
    </div>
</div>
{% endblock content %}