{%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 class="row">
                
                <form method="POST" action="{% url 'result2' %}">
                    {% 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="3expressions_1st" name="3expressions_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="3expressions_2nd" name="3expressions_2nd">
                        </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 3</label>
                            <input type="text" class="form-control" id="3expressions_3rd" name="3expressions_3rd">
                        </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 mt-5">
                    <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>
            </div>

        </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>