{% extends "base.auth.html" %}
{% block container %}

<div class="row g-0 flex-fill">
    <div class="col-12 col-lg-6 col-xl-4 d-flex flex-column justify-content-center">
        <div class="container container-tight my-5 px-lg-5">
            <div class="text-center mb-2">
                {% include "logo.html" %}
            </div>
            <h2 class="h3 text-center mb-2">
                {% if chat_room %}
                {{ _("Welcome to") }} {{chat_room.name}}
                {% elseif SETTINGS.site_name %}
                {{ _("Welcome to") }} {{SETTINGS.site_name}}
                {% else %}
                {{ _("Welcome") }}
                {% endif %}
            </h2>
            <div class="text-center mb-3">
                {% if chat_room %} {{chat_room.description}} {% endif %}
            </div>
            {{ msg() }}

            <div class="row">
                {% if not active_room %}
                <div class="col">
                    <div class="alert alert-danger" role="alert">
                        <div class="d-flex">
                            <div>
                                <h4 class="alert-title">{{chat_room.name}} {{ _("chatroom is inactive") }}</h4>
                                <div class="">{{ _("This chat room has been deactivated. Please contact us for more information") }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                {% elseif kicked_user %}
                <div class="col">
                    <div class="alert alert-danger" role="alert">
                        <div class="d-flex">
                            <div>
                                <h4 class="alert-title">{{ _("You have been kicked out from") }} {{chat_room.name}}</h4>
                                <div class="">{{ _("Sorry, you have been kicked out from this chatroom due to a policy violation. Please contact us for more information") }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                {% elseif access_denied %}
                <div class="col">
                    <div class="alert alert-danger" role="alert">
                        <div class="d-flex">
                            <div>
                                <h4 class="alert-title">{{chat_room.name}} {{ _("Access is denied") }}</h4>
                                <div class="">{{ _("You may not have the appropriate permissions to access this room") }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                {% else %}
                <div class="col align-content-center">
                    <form class="user " method="POST">
                        {{ csrf_token()|raw }}
                        {% if chat_room.is_protected %}
                        <div class="mb-3">
                            <div class="input-group input-group-flat text-center">
                                <input type="text" name="pin" class="form-control form-control-user" id="pin" aria-describedby="pin" placeholder="{{_('Enter Chatroom PIN')}}">
                            </div>
                        </div>
                        {% endif %}
                        <div class="mb-3 text-center">
                            <button type="submit" class="btn btn-primary btn-user btn-block">
                                {{ _("Join Chat") }}
                            </button>
                        </div>
                    </form>
                    
                    {% if room_auto_join and not chat_room.is_protected %}
                        <script>document.getElementById('join_form').submit();</script>
                    {% endif %}
                </div>
                {% endif %}
            </div>
            <hr>
            <div class="text-center">
                <a class="small" href="{{ url('index') }}">{{ _("Home") }}</a>
            </div>

        </div>
    </div>
    <div class="col-12 col-lg-6 col-xl-8 d-none d-lg-block">
        {% if chat_room.cover_image %}
            <div class="bg-cover h-100 min-vh-100" style="background-image: url({{MEDIA_URL}}/chatrooms/{{chat_room.cover_image}})"></div>
        {% else %}
            {% if SETTINGS.login_page_image %}
                <div class="bg-cover h-100 min-vh-100" style="background-image: url({{MEDIA_URL}}/settings/{{SETTINGS.login_page_image}})"></div>
            {% else %}
                <div class="bg-cover h-100 min-vh-100" style="background-image: url({{STATIC_URL}}/img/login.jpg"></div>
            {% endif %}
        {% endif %}
    </div>
</div>


{% endblock %}