{% extends 'base.html.twig' %}

{% block title %}MPP-Tool{% endblock %}

{% block body %}
    <h1>MPP-Tool</h1>
    <p id="instruction">Bitte füllen sie alle Felder aus, um eine Risikoanalyse zu erstellen.</p>
    <form method="post" id="form-risk" class="form form--catalogue">
        <div class="row-box">
            <div class="col-box">
                <div class="form-fields">
                    <label for="asset">Bitte wählen sie eine Anlage.</label>
                    <select name="asset" id="asset">
                        {% for asset in dinAssets %}
                            <option value="{{ asset.id }}">{{ asset.dinNumber }} - {{ asset.name }}</option>
                        {% endfor %}
                    </select>
                    <div id="no-benchmark-data" class="denk-dir-was-aus-flo" style="color: #6D0507; display: {% if benchmarkValues|length < 1 %} block {% else %} none {% endif %}"  >Für sind Anlage leider keine Benchmark-Daten vorhanden!</div>
                </div>
                <div class="benchmark-available">
                    <h2>Risikoanalyse</h2>
                    <div class="row-box">
                        <div class="col-box">
                            <div class="form-fields">
                                <label for="failure">Wie hoch ist die Ausfallwahrscheinlichkeit?</label>
                                <select name="failure" id="failure">
                                    {% for key, failure in riskFailure %}
                                        <option value="{{ key }}">{{ failure[0] }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="col-box">
                            <div class="form-fields">
                                <label for="costs">Wie hoch ist der Schaden bei Ausfall?</label>
                                <select name="costs" id="costs">
                                    {% for key, costs in riskCosts %}
                                        <option value="{{ key }}">{{ costs[0] }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </div>
                    <h2>Optimierungsckeck</h2>
                    <div class="row-box">
                        <div class="col-box">
                            <div class="form-fields">
                                <label for="maintenance">Wird durch die Wartung der Abnutzungsvorrat positiv beeinflusst?</label>
                                <select name="maintenance" id="maintenance">
                                    <option value="0">Nein</option>
                                    <option value="1">Ja</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-box">
                            <div class="form-fields">
                                <label for="inspection">Kann durch eine Inspektion der Zustand der Anlage erkannt werden?</label>
                                <select name="inspection" id="inspection">
                                    <option value="0">Nein</option>
                                    <option value="1">Ja</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-box">
                            <div class="form-fields">
                                <label for="check">Genügt eine einfache Sichtkontrolle im Rahmen des regelmäßigen Rundgangs?</label>
                                <select name="check" id="check">
                                    <option value="0">Nein</option>
                                    <option value="1">Ja</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <h2>Zyklus und Bandbreite</h2>
                    <div class="row-box">
                        <div class="col-box">
                            <div class="form-fields">
                                <label for="cycle">Aktueller Zyklus (in Monaten)</label>
                                {% if initialDinAsset is not null %}
                                    <input name="cycle" type="number" id="cycle" value="" min="{{ initialDinAsset.cycleMonthsMin }}" max ="{{ initialDinAsset.cycleMonthsMax }}">
                                {% else %}
                                    <input name="cycle" type="number" id="cycle" disabled>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-box">
                            <div class="form-fields">
                                <label for="benchmark">Bandbreite Anlage</label>
                                <select name="benchmark" id="benchmark">
                                    {%  for key, benchmarkValue in benchmarkValues %}
                                        <option value="{{ key }}">{{ benchmarkValue }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </div>
                    <span class="btn" id="calculate">Berechnen</span>
                </div>
            </div>
            <div class="col-box">
                <div class="result-box" id="result-box">
                    <h3>Ergebnis</h3>
                    <p class="result-not-existing">Bitte erst berechnen!</p>
                    <div class="result-existing">
                        <dl>
                            <dt>Inspektion<br />
                                (empfohlener Zyklus in Monaten)</dt>
                            <dd id="resInspection"></dd>
                            <dt>Wartung<br />
                                (empfohlener Zyklus in Monaten)</dt>
                            <dd id="resMaintenance"></dd>
                            <dt>Kostenersparnis in Prozent</dt>
                            <dd id="resPercentage"></dd>
                            <dt>Kostenersparnis in Euro</dt>
                            <dd id="resEuro"></dd>
                        </dl>
                        <span class="btn" id="worksheet">Arbeitskarte erstellen</span>
                    </div>
                </div>
            </div>
        </div>
    </form>
{% endblock %}