{% extends "base.html" %}
{% block title %}Index{% endblock title %}
{% block head %}
{{ super() }}
<script>
    window.onload = function hide_buttons() {
        document.getElementById("create-button").hidden = true;
        document.getElementById("edit-button").hidden = true;
    }

    function switch_buttons() {
        var text = document.getElementById("link").value;
        var create = document.getElementById("create-button");
        var edit = document.getElementById("edit-button");

        if (!isValidHttpUrl(text) || containsCurrentURL(text)) {
            create.hidden = true;
            edit.hidden = false;
        } else {
            create.hidden = false;
            edit.hidden = true;
            console.log("Create")
        }
    }

    function isValidHttpUrl(string) {
        let url;
        try {
            url = new URL(string);
        } catch (_) {
            return false;
        }
        return url.protocol === "http:" || url.protocol === "https:";
    }
    function containsCurrentURL(str) {
        return str.includes((new URL(window.location.href)).host);
    }
</script>
{% endblock head %}
{% block content %}
<h2 class="fw-bold mb-0">Welcome!</h2>
<small class="text-muted">Here you can paste an ics link, to create a new proxy url.
    Alternatively you can paste an existing url to edit it.</small>
<form action="index_process">
    <div class="form-floating mb-3">
        <input name="link" type="text" class="form-control rounded-4" id="link" placeholder="https://some.url"
            oninput="switch_buttons()">
        <label for="link">Link</label>

    </div>
    <div class="form-floating mb-3">
        <input onload="hide_buttons()" id="create-button" class="w-100 mb-2 btn btn-lg rounded-4 btn-primary"
            value="Create new" name="create" type="submit">
        <input onload="hide_buttons()" id="edit-button" class="w-100 mb-2 btn btn-lg rounded-4 btn-primary"
            value="Edit ✎" name="edit" type="submit">
    </div>
</form>
{% endblock content %}