{% extends "base.html" %}
{% block content %}
<form id="calc-form">
    <p>Mold:
        <select id="mold" name="mold">
            <option value="">--Choose---</option>
            {% for m in molds %}
            <option value="{{ m.id }}">{{ m.name }}</option>
            {% endfor %}
        </select>
        <span id="mold-info"></span>
    </p>
    <p>Resin:
        <select id="resin" name="resin">
            <option value="">--Choose---</option>
            {% for r in resin %}
            <option value="{{ r.id }}">{{ r.name }}</option>
            {% endfor %}
        </select>
        <span id="resin-info"></span>
    </p>
    <p>Mixin 1:
        <select id="mixin1" name="mixin">
            <option value="">--Choose---</option>
            {% for m in mixins %}
            <option value="{{ m.id }}">{{ m.name }}</option>
            {% endfor %}
        </select>
        <span id="mixin1-info"></span>
    </p>
    <p>Mixin 2:
        <select id="mixin2" name="mixin">
            <option value="">--Choose---</option>
            {% for m in mixins %}
            <option value="{{ m.id }}">{{ m.name }}</option>
            {% endfor %}
        </select>
        <span id="mixin2-info"></span>
    </p>
    <p>Mold:
        <select id="glitter" name="glitter">
            <option value="">--Choose---</option>
            {% for g in glitters %}
            <option value="{{ g.id }}">{{ g.name }}</option>
            {% endfor %}
        </select>
        <span id="glitter-info"></span>
    </p>
</form>

<h3> Tota: $<span id="total">0.00</span></h3>
{% endblock %}