{% include 'header.html' %}
<h1 class="centered">create a new blog</h1>
<article class="main-content">
    {% if error %}
    <div class="error">{{ _(error) }}</div>
    {% endif %}
    {% if request.args.get('error') %}
    <div class="error">{{ _(request.args.get('error')) }}</div>
    {% endif %}
    {% if message %}
    <div class="message">{{ _(message) }}</div>
    {% endif %}

    <form method="post" action="/dashboard/create">
        <span class="form-field">{{ _('choose_blog_title') }}:</span>
        <input type="text" name="name" class="medium" placeholder="my awesome blog" required>
        <span class="form-field">{{ _('choose_blog_url') }}:</span>
        <input id="url" oninput="change_url();" type="text" name="url" class="medium" placeholder="my-awesome-blog" required>

        <span class="form-field" style="margin-top: 2rem;">{{ _('access_blog_how') }}?</span>
        <div class="horizontal-fields">
            <input type="radio" id="domain" name="access" value="domain">
            <label for="domain">{{ _('domain_name') }}: <i><span id="bname">my-awesome-blog</span>.{{ g.main_domain }}</i></label>
        </div>
        <div class="horizontal-fields">
            <input type="radio" id="path" name="access" value="path" checked>
            <label for="path">{{ _('path') }}: <i>{{ g.main_domain }}/b/<span id="bname2">my-awesome-blog</span></i></label>
        </div>
        <div class="horizontal-fields" style="margin-top: 2rem;">
            <input type="checkbox" name="index" id="index">
            <label for="index">{{ _('index_blog') }}?</label>
        </div>
        <input type="submit" value="{{ _('create') }}" class="btn purple">
    </form>
</article>

<script nonce="{{ g.nonce }}">
function change_url() {
    var url = document.querySelector("#url").value.trim().replaceAll(/[^a-zA-Z0-9]+/g, "-").replaceAll(".", "-").toLowerCase();
    var bname = document.querySelector("#bname");
    var bname2 = document.querySelector("#bname2");

    if(url.length > 0) {
        bname.innerText = url;
        bname2.innerText = url;
    } else {
        bname.innerText = "my-awesome-blog";
        bname2.innerText = "my-awesome-blog";
    }
}
</script>
{% include 'footer.html' %}