{#
    Copyright (c) 2015 Chintalagiri Shashank
    Released under the MIT license
#}

{% extends "base_templates/base.html" %}
{% import "parts/validation_errors.html" as validation %}
{% import "parts/costing_chart.html" as costing_chart %}
{% import "parts/module_boms.html" as boms %}

{% block magellan %}
<!-- Magellan -->
<div data-magellan-expedition="sticky">
    <dl class="sub-nav">
        <dd data-magellan-arrival="details"><a href="#details">Details</a></dd>
        <dd data-magellan-arrival="documentation"><a href="#documentation">Documentation</a></dd>
        <dd data-magellan-arrival="refbom"><a href="#refbom">BOM</a></dd>
        <dd data-magellan-arrival="modules"><a href="#modules">Modules</a></dd>
        {% if stage.product.changelog %}
            <dd data-magellan-arrival="changelog"><a href="#changelog">ChangeLog</a></dd>
        {% endif %}
        {% if stage.product.validation_errors.terrors %}
            <dd data-magellan-arrival="validation"><a href="#validation">Validation</a></dd>
        {% endif %}
        <dd data-magellan-arrival="costing"><a href="#costing">Costing</a></dd>
    </dl>
</div>
{% endblock %}


{% block main %}

<div class="row">

<h3> Product Detail </h3>

<div class="small-12 medium-6 columns">
    <div class="small-12 columns" data-magellan-destination="details">
        <a name="details"></a>
        <ul class="pricing-table shadow mrgn-20-top">
            <li class="price"> {{ stage.product.ident }} </li>
            <li class="description"> {{ stage.product.info.desc }} </li>
            {% if stage.product.info.status %}
              <span class="right label radius {{ stage.product.info.status.html_class }}">
                  {{ stage.product.info.status }}
              </span>
            {% endif %}
            {% if stage.product.info.line %}
              <span class="right label radius secondary">{{ stage.product.info.line }}</span>
            {% endif %}
            {% if stage.product.info.ptype %}
              <span class="right label radius secondary">{{ stage.product.info.ptype }}</span>
            {% endif %}
        </ul>
    </div>

    <div class="small-12 columns panel header radius" data-magellan-destination="modules">
        <a name="modules"></a>
        <div class="sign small-9 medium-6 small-centered columns autoscale">
            <h6>Product Contents</h6>
        </div>
        <div class="small-12 columns">
        {% for card, qty in stage.product.card_listing %}
            <a href="/entityhub/cards/{{ card }}">
            <div class="small-12 columns">
                <article class="product-content-info active-tb shadow mrgn-20-top">
                    <span class="product-content-label">
                        {{ card }}
                    </span>
                    <span class="product-content-qty">
                        {{ qty }}
                    </span>
                </article>
            </div>
            </a>
            {% endfor %}
            {% for cable, qty in stage.product.cable_listing %}
            <a href="/entityhub/cables/{{ cable }}">
            <div class="small-12 columns">
                <article class="product-content-info  active-tb shadow mrgn-20-top">
                    <span class="product-content-label">
                        {{ cable }}
                    </span>
                    <span class="product-content-qty">
                        {{ qty }}
                    </span>
                </article>
            </div>
            </a>
        {% endfor %}
        </div>
    </div>

    {% if stage.product.validation_errors.terrors %}
    <div class="small-12 columns" data-magellan-destination="validation">
        <a name="validation"></a>
        <div class="small-12 columns panel header radius">
            <div class="sign small-9 medium-6 small-centered columns autoscale">
                <h6>Validation Errors</h6>
            </div>
            {{ validation.render_validation_errors(stage.product.validation_errors) }}
        </div>
    </div>
    {% endif %}


</div>

<div class="small-12 medium-6 columns">
    <div class="small-12 columns panel header radius" data-magellan-destination="refbom">
        <a name="refbom"></a>
        <div class="sign small-9 medium-6 small-centered columns autoscale">
            <h6>Composite BOM</h6>
        </div>
        {{ boms.render_cobom(stage.product.obom) }}
    </div>
</div>

<!-- BOM -->

<div class="small-12 columns" data-magellan-destination="costing">
    <a name="costing"></a>
    {{ costing_chart.render_indicative_costing_chart(stage.product) }}
</div>

</div>
{% endblock %}
