{%load static%}
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Algebra Calculator</title>
    <link rel="stylesheet" href="{%static 'ui/style.css'%}">
    <link href='https://fonts.googleapis.com/css?family=Monda' rel='stylesheet'>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>

<body>
    <div class="container justify-content-center text-center">
        <div class="row">
            <h1 class="text-center mt-2 ">Kalkulator<br>Persamaan Linear</h1>
        </div>
        <div class="row justify-content-center">
            <div class="col-4"></div>
            <div class="col-4 ">
                <a type="button" class="btn-primary btn" href="TwoExpression_LinearEquations">Dua Persamaan</a>
                <a type="button" class="btn-primary btn" href="ThreeExpression_LinearEquations">Tiga Persamaan</a>
            </div>
            <div class="col-4"></div>
        </div>
        <form method="POST" action="{% url 'result1' %}">
            {% csrf_token %}
            <div class="row mt-3">
                <div class="col-4"></div>
                <div class="col-4">
                    <label for="exampleFormControlTextarea1" class="form-label">Persamaan 1</label>
                    <input type="text" class="form-control" id="2expressions_1st" name="2expressions_1st">
                </div>
                <div class="col-4"></div>
            </div>
            <div class="row">
                <div class="col-4"></div>
                <div class="col-4">
                    <label for="exampleFormControlTextarea1" class="form-label">Persamaan 2</label>
                    <input type="text" class="form-control" id="2expressions_2nd" name="2expressions_2nd">
                </div>
                <div class="col-4"></div>
            </div>
            <div class="row mt-3">
                <div class="col-5"></div>
                <div class="col-2">
                    <button type="submit" class="btn btn-primary">Result</button>
                </div>
                <div class="col-5"></div>
            </div>
        </form>
        <br>
        <div class="row">
            <div class="col-md-6" style="margin: 0 auto">
                {% if error %}
                <div class="alert alert-danger" role="alert">
                    <strong>Error!!!</strong>
                  </div>
                {% else %}
                <div class="alert alert-success" role="alert">
                    {{result2E}}
                  </div>
                {% endif %}
            </div>
        </div>
        
    </div>

    </form>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
        crossorigin="anonymous"></script>
</body>

</html>