{% extends "_layout.html" %}

{%- block title -%}
    {#-
        In here you can see how to use the language URL compment to select the text to display.
    -#}
    {%- match lang -%}
        {%- when Lang::en -%} Hello!
        {%- when Lang::de -%} Hallo!
        {%- when Lang::fr -%} Bonjour!
    {%- endmatch -%}
{%- endblock -%}

{%- block content -%}
    <h1>
        {%- match lang -%}
            {%- when Lang::en -%} Hello!
            {%- when Lang::de -%} Hallo!
            {%- when Lang::fr -%} Bonjour!
        {%- endmatch -%}
    </h1>
    <form
        method="GET"
        action="/{{ lang }}/greet-me.html"
        autocomplete="off"
    >
        <p>
            {#-
                If your text contains long lines, you may want to split them,
                so you as a developer have an easier time reading them.

                If you don't want to end up with a multitude of spaces in the
                generated content, you can use empty comments as seen below: `#-~#`.
                This would strip the space before the comment, and leave a newline
                character after the comment. Another option would be `#~-#`,
                so that single space remains.
            -#}
            {%- match lang -%}
                {%- when Lang::en -%}
                    I would like to say <em>hello</em>. {#-~#}
                    Would you please tell me your name?
                {%- when Lang::de -%}
                    Ich möchte dir gerne <em>hallo</em> sagen. {#-~#}
                    Bitte nenne mir doch deinen Namen!
                {%- when Lang::fr -%}
                    Je voudrais vous dire <em>bonjour</em>. {#-~#}
                    Pourriez-vous me donner votre nom ?
            {%- endmatch -%}
        </p>
        <p>
            <label>
                {%- match lang -%}
                    {%- when Lang::en -%} My name is
                    {%- when Lang::de -%} Ich heiße
                    {%- when Lang::fr -%} Je m'appelle
                {%- endmatch -%}:
                <input
                    type="text"
                    value="{{name}}"
                    name="name"
                    required
                    style="width: 10em"
                />
            </label>
        </p>
        <p>
            <label>
                <button type="submit">
                    {%- match lang -%}
                        {%- when Lang::en -%} Greet me, then!
                        {%- when Lang::de -%} Dann begrüße mich!
                        {%- when Lang::fr -%} Saluons-nous !
                    {%- endmatch -%}
                </button>
            </label>
        </p>
    </form>

    {#-
        The called macro is defined in base template "_layout.html",
        and used to display the language selection footer.
    ~#}
    {%- call lang_select("index") -%}
{%- endblock -%}