{% extends "layout.html" %}
{% block content %}
<div class="{{ theme.userInputDivClass }}" style="{{ theme.userInputFormColor }}">
    <form class="form-inline">
        <input class="form-control mr-sm-2" type="search" placeholder="Customer Name" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
</div>
<div class="card">
    <div class="card-header">
        <h4>Steinel</h4>
        <ul class="nav nav-tabs card-header-tabs">
            <li class="nav-item">
                <a class="nav-link active" href="#">Overview</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Projects</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Components</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Sales</a>
            </li>
        </ul>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-sm">
                <table class="{{ theme.tableClass }}">
                    <thead>
                        <tr>
                            <th scope="col">TOP PROJ.</th>
                            <th scope="col">Name</th>
                            <th scope="col">Potential</th>
                            <th scope="col">Delivered</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th scope="row">1</th>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@mdo</td>
                        </tr>
                        <tr>
                            <th scope="row">2</th>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>@fat</td>
                        </tr>
                        <tr>
                            <th scope="row">3</th>
                            <td>Larry</td>
                            <td>the Bird</td>
                            <td>@twitter</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="col-sm">
                <table class="{{ theme.tableClass }}">
                    <thead>
                        <tr>
                            <th scope="col">TOP IC's</th>
                            <th scope="col">Name</th>
                            <th scope="col">Potential</th>
                            <th scope="col">Delivered</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th scope="row">1</th>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@mdo</td>
                        </tr>
                        <tr>
                            <th scope="row">2</th>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>@fat</td>
                        </tr>
                        <tr>
                            <th scope="row">3</th>
                            <td>Larry</td>
                            <td>the Bird</td>
                            <td>@twitter</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="col-sm">
                <table class="{{ theme.tableClass }}">
                    <thead>
                        <tr>
                            <th scope="col">TOP MAN.</th>
                            <th scope="col">Name</th>
                            <th scope="col">Potential</th>
                            <th scope="col">Delivered</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th scope="row">1</th>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@mdo</td>
                        </tr>
                        <tr>
                            <th scope="row">2</th>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>@fat</td>
                        </tr>
                        <tr>
                            <th scope="row">3</th>
                            <td>Larry</td>
                            <td>the Bird</td>
                            <td>@twitter</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            </div>
        </div>
    <a href="#" class="btn btn-primary">Client View</a>
</div>
{% endblock content %}