{% extends "base.html" %}
{% block title %}Data{% endblock %}
{% block content %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
<div class="container">
    <h2 class="header">Data</h2>
    <table class="table table-striped table-dark">
        <thead>
            <tr>
                <td>#</td>
                <td>Name</td>
                <td>Age</td>
                <td>City</td>
            </tr>
        </thead>
        <tbody>
            {% for row in data %}
            <tr>
                <td scope="row">{{ loop.index }}</td>
                {% for element in row %}
                    <td>{{ element }}</td>
                {% endfor %}
            </tr>
            {% endfor %}
        </tbody>
    </table>
    <form method="POST" action="{{ url_for('data') }}">
        <div class="row">
            <div class="col">
                <label for="name">Name:</label>
                <input type="text" class="form-control" id="name" name="name" required>
            </div>
            <div class="col">
                <label for="age">Age:</label>
                <input type="number" class="form-control" id="age" name="age" required>
            </div>
            <div class="col">
                <label for="city">City:</label>
                <input type="text" class="form-control" id="city" name="city" required>
            </div>
            <div class="col">
                <button type="submit" class="btn btn-primary" id="btn">Submit</button>
            </div>
        </div>
    </form>
</div>
{% endblock %}