<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>What Did You Do?</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <script>
    window.onload = function() {
        var dateInput = document.getElementById('date');
        if (!dateInput.value) {
            var today = new Date();
            var yyyy = today.getFullYear();
            var mm = String(today.getMonth() + 1).padStart(2, '0');
            var dd = String(today.getDate()).padStart(2, '0');
            dateInput.value = yyyy + '-' + mm + '-' + dd;
        }
    };
    </script>
</head>
<body>
    <div class="container">
        <h2><a href="/">What Did You Do?</a></h2>
        <form method="get" action="" onsubmit="event.preventDefault(); window.location.href='/' + encodeURIComponent(document.getElementById('user').value) + '/' + encodeURIComponent(document.getElementById('date').value);">
            <label for="user">User:</label>
            <input type="text" id="user" name="user" value="{{ user or '' }}" placeholder="insert OSM username" required>

            <label for="date">Date:</label>
            <input type="date" id="date" name="date" value="{{ date or '' }}" required>

            <button type="submit">Show</button>
        </form>
    {% if user and date %}
        {% if error %}
            <p class=error>{{ error }}</p>
        {% elif changes %}
            <p>{{ user }} did {{ changes.values() | sum }} changes in {{ changesets }} changeset{{ "s" if changesets > 1 else ""  }} on {{ date }}!</p>
            <ul>
            {% for app, count in changes.items() %}
                <li>{{ count }} changes in {{ app }}</li>
            {% endfor %}
            </ul>
        {% else %}
            <p>{{ user }} did not do anything on {{ date }}.</p>
        {% endif %}
    {% else %}
        <p>
            How much did you contribute to OpenStreetMap today? Or any other day?

            To answer this question, enter your OSM username and the date you want to check above and click "Show".
        </p>
    {% endif %}
    <p class="footer">Powered by <a href="https://github.com/rompe/whatdidyoudo">whatdidyoudo {{ config['VERSION'] }}</a></p>
    </div>
</body>
</html>
