{% import "macro_functions.html.twig" as mf %}

<div class="accordion-item">
    <h3 class="accordion-header">
        <button class="accordion-button{% if not request.checkout %} collapsed{% endif %}" type="button"
                data-bs-toggle="collapse" data-bs-target="#register" aria-controls="register">
            <svg class="svg-icon me-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <path
                    d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,6A2,2 0 0,0 10,8A2,2 0 0,0 12,10A2,2 0 0,0 14,8A2,2 0 0,0 12,6M12,13C14.67,13 20,14.33 20,17V20H4V17C4,14.33 9.33,13 12,13M12,14.9C9.03,14.9 5.9,16.36 5.9,17V18.1H18.1V17C18.1,16.36 14.97,14.9 12,14.9Z"/>
            </svg>
            <span>{{ 'Login or Register'|trans }}</span>
        </button>
    </h3>
    <div id="register" class="accordion-collapse collapse{% if request.checkout and not client %} show{% endif %}"
         data-bs-parent="#orderManager">
        <div class="accordion-body">
            <div role="tablist">
                <div class="tab-content" id="nav-tabContent">
                    <div class="tab-pane show active" id="sign-in" role="tabpanel" aria-labelledby="in-tab" tabindex="0">
                        <form method="post" action="{{ 'client/login'|api_url(role: 'guest') }}" {{ fb_api_form({callback: 'onLogin'}) }}>
                            <div class="row">
                                <div class="form-floating col-md-7 mb-3">
                                    <input class="form-control form-control-sm" type="email" name="email" id="email"
                                           required="required"
                                           value="{{ request.email }}"
                                           placeholder="{{ 'Email Address'|trans }}"
                                           data-validation-required-message="{{ 'You must fill in your email.'|trans }}">
                                    <label for="email" class="ms-2">{{ 'Email Address'|trans }}</label>
                                </div>
                                <div class="form-floating col-md-7 mb-3">
                                    <input class="form-control form-control-sm" type="password" name="password" id="password"
                                           required="required"
                                           value="{{ request.password }}"
                                           placeholder="{{ 'Password'|trans }}"
                                           data-validation-required-message="{{ 'You must fill in your password.'|trans }}">
                                    <label for="password" class="ms-2">{{ 'Password'|trans }}</label>
                                </div>
                            </div>
                            <div class="d-flex gap-2">
                                <button class="btn btn-sm btn-primary" type="submit">
                                    {{ 'Login'|trans }}
                                </button>
                                <button class="btn btn-sm btn-link" id="up-tab" data-bs-toggle="tab" data-bs-target="#sign-up"
                                        type="button" role="tab" aria-controls="sign-up"
                                        aria-selected="false">{{ 'Create Account'|trans }}</button>
                            </div>
                        </form>
                    </div>
                    <div class="tab-pane" id="sign-up" role="tabpanel" aria-labelledby="up-tab" tabindex="0">
                        <form method="post" action="{{ 'client/create'|api_url(role: 'guest') }}" {{ fb_api_form({callback: 'onAccountCreate'}) }}>

                            {% set r = guest.client_required %}
                            <div class="row">
                                <div class="form-floating col-md-7 mb-3">
                                    <input class="form-control form-control-sm" type="email" name="email" id="reg-email"
                                           required="required"
                                           value="{{ request.email }}"
                                           placeholder="{{ 'Email Address'|trans }}">
                                    <label for="reg-email" class="ms-2">{{ 'Email Address'|trans }}</label>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-7">
                                    <div class="row">
                                        <div class="form-floating col-md-6 mb-3">
                                            <input class="form-control form-control-sm" type="text" name="first_name" id="first-name"
                                                   required="required"
                                                   value="{{ request.first_name }}"
                                                   placeholder="{{ 'First Name'|trans }}">
                                            <label for="first-name" class="ms-2">{{ 'First Name'|trans }}</label>
                                        </div>

                                        <div class="form-floating col-md-6 mb-3">
                                            <input class="form-control form-control-sm" type="text" name="last_name" id="last_name"
                                                   value="{{ request.last_name }}"
                                                   placeholder="{{ 'Last Name'|trans }}"{% if 'last_name' in r %} required="required"{% endif %}>
                                            <label for="last_name" class="ms-2">{{ 'Last Name'|trans }}</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {% if 'company' in r %}
                                <div class="row">
                                    <div class="form-floating col-md-7 mb-3">
                                        <input class="form-control form-control-sm" type="text" name="company" id="company"
                                               required="required"
                                               value="{{ request.company }}"
                                               placeholder="{{ 'Company'|trans }}">
                                        <label for="company" class="ms-2">{{ 'Company'|trans }}</label>
                                    </div>
                                </div>
                            {% endif %}

                            {% if 'birthday' in r %}
                                <div class="row">
                                    <div class="form-floating col-md-7 mb-3">
                                        <input class="form-control form-control-sm" type="date" name="birthday" id="birthday"
                                               placeholder="{{ 'Birthday'|trans }}">
                                        <label for="birthday" class="ms-2">{{ 'Birthday'|trans }}</label>
                                    </div>
                                </div>
                            {% endif %}

                            {% if 'gender' in r %}
                                <div class="row">
                                    <div class="form-floating col-md-7 mb-3">
                                        <select class="form-select form-select-sm" name="gender" id="gender">
                                            <option value="male">{{ 'Male'|trans }}</option>
                                            <option value="female">{{ 'Female'|trans }}</option>
                                            <option value="nonbinary">{{ 'Non-binary'|trans }}</option>
                                            <option value="other">{{ 'Other'|trans }}</option>
                                        </select>
                                        <label for="gender" class="ms-2">{{ 'You are'|trans }}</label>
                                    </div>
                                </div>
                            {% endif %}

                            <div class="row">
                                <div class="form-floating col-md-7 mb-3">
                                    <input class="form-control form-control-sm" type="password" name="password" id="reg-password"
                                           required="required"
                                           placeholder="{{ 'Password'|trans }}">
                                    <label for="reg-password" class="ms-2">{{ 'Password'|trans }}</label>
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-floating col-md-7 mb-3">
                                    <input class="form-control form-control-sm" type="password" name="password_confirm" id="password-confirm"
                                           required="required"
                                           placeholder="{{ 'Confirm Password'|trans }}">
                                    <label for="password-confirm" class="ms-2">{{ 'Confirm Password'|trans }}</label>
                                </div>
                            </div>

                            {% if 'address_1' in r %}
                            <div class="row">
                                <div class="form-floating col-md-7 mb-3">
                                    <input class="form-control form-control-sm" type="text" name="address_1" id="address_1"
                                           value="{{ request.address_1 }}"
                                           placeholder="{{ 'Address'|trans }}">
                                    <label for="address_1" class="ms-2">{{ 'Address'|trans }}</label>
                                </div>
                            </div>
                            {% endif %}

                            {% if 'address_2' in r %}
                            <div class="row">
                                <div class="form-floating col-md-7 mb-3">
                                    <input class="form-control form-control-sm" type="text" name="address_2" id="address_2"
                                          value="{{ request.address_2 }}"
                                           placeholder="{{ 'Address 2'|trans }}">
                                    <label for="address_2" class="ms-2">{{ 'Address 2'|trans }}</label>
                                </div>
                            </div>
                            {% endif %}

                            {% if 'city' in r %}
                                <div class="row">
                                    <div class="form-floating col-md-7 mb-3">
                                        <input class="form-control form-control-sm" type="text" name="city" id="city"
                                               value="{{ request.city }}"
                                               placeholder="{{ 'City'|trans }}">
                                        <label for="city" class="ms-2">{{ 'City'|trans }}</label>
                                    </div>
                                </div>
                            {% endif %}

                            {% if 'country' in r %}
                                <div class="row">
                                    <div class="form-floating col-md-7 mb-3">
                                        <select class="form-select form-select-sm" name="country" id="country"
                                                required="required">
                                            <option value="">{{ '-- Select Country --'|trans }}</option>
                                            {% for val,label in guest.system_countries %}
                                                <option value="{{ val }}" label="{{ label|e }}" {% if request.country|default('') == val %}selected{% endif %}>{{ label|e }}</option>
                                            {% endfor %}
                                        </select>
                                        <label for="country" class="ms-2">{{ 'Country'|trans }}</label>
                                    </div>
                                </div>
                            {% endif %}

                            {% if 'state' in r %}
                                <div class="row">
                                    <div class="form-floating col-md-7 mb-3">
                                        <input class="form-control form-control-sm" type="text" name="state" id="state"
                                               value="{{ request.state }}"
                                               placeholder="{{ 'State'|trans }}">
                                        <label for="state" class="ms-2">{{ 'State'|trans }}</label>
                                    </div>
                                </div>
                            {% endif %}

                            {% if 'postcode' in r %}
                                <div class="row">
                                    <div class="form-floating col-md-7 mb-3">
                                        <input class="form-control form-control-sm" type="text" name="postcode" id="postcode"
                                               value="{{ request.postcode }}"
                                               placeholder="{{ 'Zip/Postal Code'|trans }}">
                                        <label for="postcode" class="ms-2">{{ 'Zip/Postal Code'|trans }}</label>
                                    </div>
                                </div>
                            {% endif %}

                            {% if 'phone' in r %}
                                <div class="row">
                                    <div class="col-md-7 mb-3">
                                        <label for="phone" class="form-label">{{ 'Phone Number'|trans }}</label>
                                        <div class="input-group">
                                            <span class="input-group-text">+</span>
                                            <input class="form-control form-control-sm fb-phone-country-code" type="text" name="phone_cc" id="phone_cc" value="{{ request.phone_cc }}" inputmode="numeric" maxlength="3" pattern="[0-9]{1,3}" autocomplete="tel-country-code"
                                                   placeholder="{{ 'Phone Code'|trans }}">
                                            <input class="form-control form-control-sm w-50" type="text" name="phone" id="phone"
                                                   placeholder="{{ 'Phone Number'|trans }}">
                                        </div>
                                    </div>
                                </div>
                            {% endif %}

                            {% set custom_fields = guest.client_custom_fields %}
                            {% for field_name, field in custom_fields %}
                                {% if field.active %}
                                    <div class="row">
                                        <div class="form-floating col-md-7 mb-3">
                                            <input class="form-control form-control-sm" type="text" name="{{ field_name }}" id="{{ field_name }}"
                                                   value="{{ request.(field_name) }}"
                                                   {% if field.required %}required="required"{% endif %}
                                                   placeholder="{{ field_name|capitalize }}">
                                            <label class="ms-2" for="{{ field_name }}">{% if field.title is not empty %}{{ field.title }}{% else %} {{ field_name|capitalize }} {% endif %}</label>
                                        </div>
                                    </div>
                                {% endif %}
                            {% endfor %}
                            {{ mf.recaptcha }}
                            {% if settings.signup_tos == 'explicit' %}
                                <div class="form-check mb-1">
                                    <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" required>
                                    <label class="form-check-label" for="flexCheckDefault">
                                        {# TODO: Make this translatable once support for placeholders is implemented #}
                                        <span>I agree to the <a href="{{ 'tos'|url }}" target="_blank">{{ 'Terms of Service'|trans }}</a> and <a href="{{ 'privacy-policy'|url }}" target="_blank">{{ 'Privacy Policy'|trans }}</a>.</span>
                                    </label>
                                </div>
                            {% endif %}
                            <div class="d-flex gap-2">
                                <button class="btn btn-sm btn-primary" type="submit">{{ 'Register'|trans }}</button>
                                <button class="btn btn-sm btn-link active" id="in-tab" data-bs-toggle="tab"
                                        data-bs-target="#sign-in" type="button" role="tab"
                                        aria-controls="sign-in"
                                        aria-selected="true">{{ 'Already a User?'|trans }}
                                </button>
                            </div>
                            {% if settings.signup_tos == 'implicit' %}
                                <div class="mb-1">
                                    {# TODO: Make this translatable once support for placeholders is implemented #}
                                    <span class="text-muted mb-1">By creating an account, you agree to our <a href="{{ 'tos'|url }}" target="_blank">{{ 'Terms of Service'|trans }}</a> and <a href="{{ 'privacy-policy'|url }}" target="_blank">{{ 'Privacy Policy'|trans }}</a>.</span>
                                </div>
                            {% endif %}
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
