{% extends "layout.html" %}

{% block title %}
    Home
{% endblock %}

{% block main %}        
<div class="container-lg d-flex flex-column align-items-center mt-2">
    <p class = "text-md-center" style="font-size: 18px;">This beam calculator helps you calculating the internal forces and support reactions of continuous beams with 2-5 spans.</p>
</div>
    {% if index != 0 %}

    <div class="container-lg d-flex flex-column align-items-center">
        <div class="alert alert-danger alert-dismissible fade show text-center" role="alert">
            {% if index == 1 %}
                Please choose a number of spans!
            {% endif %}
            {% if index == 2 %} 
                Please enter a value for Span!
            {% endif %}
            {% if index == 3 %}
                Please enter a value for Load!
            {% endif %}   
            {% if index == 4 %} 
                Please enter only numbers for Span!
            {% endif %}
            {% if index == 5 %}
                Please enter only numbers for Load!
            {% endif %}
        </div>
    </div>
    {% endif %}
    <div class="container-lg d-flex flex-column align-items-center mt-5">
        <form action="/calculated" method="POST">
            <div class="row g-3 align-items-center">
                <div class="col-12">
                    <label for="span" class="form-label"><b>Number of Spans:</b></label>
                    <select class="form-select" name="fields">
                        <option disabled selected>Number of Spans</option>
                        {% for field in fields %}
                        <option value="{{field}}">{{field}}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-12">
                    <label for="span" class="form-label"><b>Span:</b></label>
                    <div class="input-group">
                        <input class="form-control" id="span" name="span" placeholder="Span [m]">
                        <span class="input-group-text">m</span>
                    </div>
                </div>
                <div class="col-12">
                    <label for="load" class="form-label"><b>Constant Line Load:</b></label>
                    <div class="input-group">
                        <input class="form-control" id="load" name="load" placeholder="Line Load [kN/m]">
                        <span class="input-group-text">kN/m</span>
                    </div>
                </div>
                <div class="col-12 d-flex justify-content-end">
                    <button class="btn btn-light" type="submit">Calculate Forces</button> 
                </div>
            </div>
        </form>
        <div class="d-flex justify-content-center w-100 mt-3">
            <img src="\static\images\bridge.jpg" class="img-fluid" style="max-width: 50%; height: auto;">
        </div>
    </div>
    
    

    
{% endblock %}