{% macro company_summary(view_model) %}

<div class="columns is-centered">
    <div class="column is-two-thirds">
        <div class="section has-text-centered">
            <h1 class="title">
                {{ gettext("Company overview") }}
            </h1>
        </div>
        <br>
        <div class="section box">
            <div class="table-container">
                <table class="table has-text-left mx-auto">
                    <tbody>
                        <tr>
                            <td class="has-text-left has-text-weight-semibold">{{ gettext("ID") }}</td>
                            <td class="has-text-left">{{ view_model.id }}</td>
                        </tr>
                        <tr>
                            <td class="has-text-left has-text-weight-semibold">{{ gettext("Name") }}</td>
                            <td class="has-text-left">{{ view_model.name }}</td>
                        </tr>
                        <tr>
                            <td class="has-text-left has-text-weight-semibold">{{ gettext("Email") }}</td>
                            <td class="has-text-left">{{ view_model.email }}</td>
                        </tr>
                        <tr>
                            <td class="has-text-left has-text-weight-semibold">{{ gettext("Registered since") }}
                            </td>
                            <td class="has-text-left">{{ view_model.registered_on }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="section box">
            <div class="has-text-centered">
                <h1 class="title is-4">
                    {{ gettext("Metrics") }}
                </h1>
            </div>
            <br>
            <div class="table-container">
                <table class="table has-text-left mx-auto">
                  <thead class="has-text-centered">
                    <tr>
                      <th></th>
                      <th>
                        <span class="icon">
                          {{ "industry"|icon }}
                        </span>
                        <br>
                        <a href="{{ view_model.p_account_overview_url }}">
                          {{ gettext("Account p") }}
                        </a>
                      </th>
                      <th>
                        <span class="icon">
                          {{ "oil-can"|icon }}
                        </span>
                        <br>
                        <a href="{{ view_model.r_account_overview_url }}">
                          {{ gettext("Account r") }}
                        </a>
                      </th>
                      <th>
                        <span class="icon">
                          {{ "users"|icon }}
                        </span>
                        <br>
                        <a href="{{ view_model.a_account_overview_url }}">
                          {{ gettext("Account a") }}
                        </a>
                      </th>
                      <th>
                        <span class="icon">
                          {{ "exchange-alt"|icon }}
                        </span>
                        <br>
                        <a href="{{ view_model.prd_account_overview_url }}">
                          {{ gettext("Account prd") }}
                        </a>
                      </th>
                    </tr>
                  </thead>
                    <tbody>
                        <tr>
                            <td>{{ gettext("Expectations") }}</td>
                            {% for exp in view_model.expectations %}
                            <td><span class="tag is-medium">{{ exp }}</span></td>
                            {% endfor %}
                        </tr>
                        <tr>
                            <td>{{ gettext("Balances") }}</td>
                            {% for bal in view_model.account_balances %}
                            <td><span class="tag is-medium">{{ bal }}</span></td>
                            {% endfor %}
                        </tr>
                        <tr>
                            <td class="has-text-weight-semibold">{{ gettext("Deviation (&percnt;)") }}</td>
                            {% for dev_rel in view_model.deviations_relative %}
                            <td><span
                                    class="tag is-light is-medium {{ 'is-danger' if dev_rel.is_critical else 'is-primary'  }}">{{
                                            dev_rel.percentage }}</span></td>
                            {% endfor %}
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="section box has-text-centered">
            <div>
                <h1 class="title is-4">
                    {{ gettext("Suppliers") }}
                </h1>
            </div>
            <br>
            <div>
                {% if view_model.show_suppliers %}
                {% for supplier in view_model.suppliers_ordered_by_volume %}
                <p><a href="{{ supplier.company_url }}"> {{ supplier.company_name }}</a> -
                    {{ supplier.volume_of_sales }}</p>
                {% endfor %}
                {% else %}
                <p>
                    {{ gettext("This company has no suppliers.") }}
                </p>
                {% endif %}
            </div>
        </div>
        <div class="section box">
            <div class="has-text-centered">
                <h1 class="title is-4">
                    {{ gettext("Plans") }}
                </h1>
            </div>
            <br>
            <div class="table-container">
                <table class="table has-text-left mx-auto">
                    <thead>
                        <tr>
                            <th></th>
                            <th>{{ gettext("Status") }}</th>
                            <th>{{ gettext("Planned sales") }}</th>
                            <th>{{ gettext("Sales deviation") }}</th>
                            <th>{{ gettext("Sales deviation (&percnt;)") }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for plan in view_model.plan_details %}
                        <tr>
                            <td><a href="{{ plan.url }}">{{ plan.name }}</a></td>
                            <td>{{ plan.status }}</td>
                            <td> <span class="tag is-medium">{{ plan.sales_volume }}</span></td>
                            <td><span class="tag is-medium">{{ plan.sales_balance }}</span></td>
                            <td>
                                <span
                                    class="tag is-light is-medium {{ 'is-danger' if plan.deviation_relative.is_critical else 'is-primary'  }}">{{
                                    plan.deviation_relative.percentage }}</span>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endmacro %}