{% from 'macros/tooltips.html' import info_tooltip %}
{% from 'macros/copy_toggle.html' import copy_toggle %}
{% macro plan_details(view_model) %}
<div class="section has-text-centered">
    <div class="section">
        <h1 class="title">
            {{ gettext("Plan information") }}
        </h1>
        <div class="fixed-grid box has-3-cols has-1-cols-mobile">
            <div class="grid">
                <div class="cell notification is-col-span-2 is-col-span-1-mobile mb-0">
                    <div class="has-text-right has-text-info-dark">
                        {{ info_tooltip(id="id_plan_id", text=gettext("This plan ID identifies your plan. It is used to account for labour time by workers and companies that work on, or respectively consume, the planned product or service.")) }}
                    </div>
                    <p class="title is-4">{{ view_model.details.plan_id[0] }}</p>
                    <p class="subtitle">
                        {{ view_model.details.plan_id[1] }}&nbsp;
                        {{ copy_toggle(view_model.details.plan_id[1]) }}
                    </p>
                </div>
                <div class="cell notification has-background-primary-light is-row-span-2 is-row-span-1-mobile mb-0">
                    <div class="content">
                        <p class="title is-4">{{ view_model.details.description[0] }}</p>
                        <div class="content">
                            <p>{% for paragraph in view_model.details.description[1] %}{{ paragraph
                                }}<br>{% endfor %}</p>
                        </div>
                    </div>
                </div>
                <div class="cell notification mb-0">
                    <p class="title is-4">{{ view_model.details.product_name[0] }}</p>
                    <p class="subtitle">{{ view_model.details.product_name[1] }}</p>
                </div>
                <div class="cell notification mb-0">
                    <p class="title is-4">{{ view_model.details.planner[0] }}</p>
                    <p class="subtitle"><a href="{{ view_model.details.planner[2] }}">{{
                    view_model.details.planner[3] }}</a></p>
                </div>
            </div>
        </div>

        <div class="fixed-grid box has-3-cols has-1-cols-mobile">
            <div class="grid">
                <div class="cell notification has-background-warning-light mb-0">
                    <div class="has-text-right has-text-info-dark">
                        {{ info_tooltip(id="id_plan_status", text=gettext("Status can be \"Active\", i.e. plan was approved and current date is within planning timeframe, or \"Inactive\", i.e. plan is not yet approved or it is expired.")) }}
                    </div>
                    <p class="title is-4">{{ view_model.details.activity_string[0] }}</p>
                    <p class="subtitle">{{ view_model.details.activity_string[1] }}</p>
                </div>
                <div class="cell notification is-col-span-2 is-col-span-1-mobile mb-0">
                    <p class="title is-4">{{ view_model.details.timeframe[0] }}</p>
                    <p class="subtitle">({{ view_model.details.active_days}} / {{ view_model.details.timeframe[1]
                        }})</p>
                    <progress class="progress" value="{{ view_model.details.active_days}}"
                        max="{{ view_model.details.timeframe[1] }}"></progress>
                </div>
                <div class="cell notification is-col-span-3 is-col-span-1-mobile mb-0">
                    <div class="columns subtitle is-italic">
                        <div class="column"><span
                                class="has-text-weight-semibold">{{  gettext("Plan creation") }}</span>
                            {{ view_model.details.creation_date }}</div>
                        <div class="column"><span
                                class="has-text-weight-semibold">{{  gettext("Plan approval") }}</span>
                            {{ view_model.details.approval_date }}</div>
                        <div class="column"><span
                                class="has-text-weight-semibold">{{  gettext("Plan expiration") }}</span>
                            {{ view_model.details.expiration_date }}</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="fixed-grid box has-3-cols has-1-cols-mobile">
            <div class="grid">
                <div class="cell box notification is-row-span-3 mb-0">
                    <div class="has-text-right has-text-info-dark">
                        {{ info_tooltip(id="id_amount", text=gettext("This is the amount you plan to deliver.")) }}
                    </div>
                    <p class="title is-4">{{ view_model.details.amount[0] }}</p>
                    <p class="subtitle">{{ view_model.details.amount[1] }}</p>
                </div>
                <div class="cell box notification is-row-span-3 is-row-start-4 mb-0">
                    <p class="title is-4">{{ view_model.details.production_unit[0] }}</p>
                    <p class="subtitle">{{ view_model.details.production_unit[1] }}</p>
                </div>
                <div class="cell box notification is-col-span-2 is-row-span-2 has-background-danger-light mb-0">
                    <div class="has-text-right has-text-info-dark">
                        {{ info_tooltip(id="id_fixed_means", text=gettext("This field is mainly to account for wear and tear of machines. E.g. if you plan to use a machine that cost 10000 hours to produce, for 10 years, and you have ten one-year-plans, then for this fixed mean of production, the value would be 1000.")) }}
                    </div>
                    <p class="title is-4">{{ view_model.details.means_cost[0] }}</p>
                    <p class="subtitle">{{ view_model.details.means_cost[1] }}</p>
                </div>
                <div class="cell box notification is-col-span-2 is-row-span-2 has-background-danger-light mb-0">
                    <div class="has-text-right has-text-info-dark">
                        {{ info_tooltip(id="id_liquid_means", text=gettext("Here, recurring costs from raw materials and consumables are summarized, e.g. electricity, rent for production halls, maintenance of machines etc.")) }}
                    </div>
                    <p class="title is-4">{{ view_model.details.resources_cost[0] }}</p>
                    <p class="subtitle">{{ view_model.details.resources_cost[1] }}</p>
                </div>
                <div class="cell box notification is-col-span-2 is-row-span-2 has-background-danger-light mb-0">
                    <div class="has-text-right has-text-info-dark">
                        {{ info_tooltip(id="id_labour", text=gettext("Planned hours of human work.")) }}
                    </div>
                    <p class="title is-4">{{ view_model.details.labour_cost[0] }}</p>
                    <p class="subtitle">{{ view_model.details.labour_cost[1] }}</p>
                </div>
            </div>
        </div>

        <div class="fixed-grid box has-3-cols has-1-cols-mobile">
            <div class="grid">
                <div class="cell box notification mb-0">
                    <div class="has-text-right has-text-info-dark">
                        {{ info_tooltip(id="id_type", text=gettext("\"Type\" can be either \"Productive\" or \"Public\". Products from the latter can be consumed for free, and are funded via the Factor of Individual Consumption (FIC).")) }}
                    </div>
                    <p class="title is-4">{{ view_model.details.type_of_plan[0] }}</p>
                    <p class="subtitle">{{ view_model.details.type_of_plan[1] }}</p>
                </div>
                <div class="cell box notification has-background-warning-light mb-0">
                    <div class="has-text-right has-text-info-dark">
                        {{ info_tooltip(id="id_price_per_unit", text=gettext("This is the amount of time that is debited when the product is consumed. 0 for public plans.")) }}
                    </div>
                    <p class="title is-4">{{ view_model.details.price_per_unit[0] }}</p>
                    <p class="subtitle">{{ view_model.details.price_per_unit[1] }}
                        {% if view_model.details.price_per_unit[2] %} <span>
                            <a href="{{ view_model.details.price_per_unit[3] }}">
                                {{ "hands-helping"|icon }}
                            </a>
                        </span>
                        {% endif %}
                    </p>
                </div>
                <div class="cell box notification has-background-warning-light mb-0">
                    <div class="has-text-right has-text-info-dark">
                        {{ info_tooltip(id="id_labour_per_unit", text=gettext("This field shows working hours spent per produced unit.")) }}
                    </div>
                    <p class="title is-4">{{ view_model.details.labour_cost_per_unit[0] }}</p>
                    <p class="subtitle">{{ view_model.details.labour_cost_per_unit[1] }}</p>
                </div>
            </div>
        </div>
    </div>

    {% endmacro %}