{% extends "base.index.html" %}
{% block content %}
<div class="container {% if SETTINGS.homepage_banner_view == '0' %}no-header{% endif %}">

	<div class="row text-center">
		{% if SETTINGS.chatroom_list_title %}
            <h1>{{SETTINGS.chatroom_list_title|htmlspecialchars_decode|raw}}</h1>
		{% else %}
			<h1>{{ _("Chat with thousands of other people from all over the world.")}}</h1>
		{% endif %}

		{% if SETTINGS.chatroom_list_description %}
			<p>{{SETTINGS.chatroom_list_description|htmlspecialchars_decode|raw}}</p>
		{% else %}
			<p>{{ _("It's 100% free & safe. Just create an account and start chatting right away.")}}</p>
		{% endif %}
	</div>

	<div class="row g-2">

		<div class="col-auto col-md-9 col-xl-9">
			<div class="row">
				<div class="form-selectgroup">
					<label class="form-selectgroup-item">
						<input type="radio" name="room-category-select" value="0" class="form-selectgroup-input" checked="">
						<span class="form-selectgroup-label">
							<i class="ti ti-home icon me-1"></i>{{_("Home")}}
						</span>
					</label>
					{% for room_category in room_categories %}
					<label class="form-selectgroup-item">
						<input type="radio" name="room-category-select" value="{{room_category.id}}" class="form-selectgroup-input">
						<span class="form-selectgroup-label">
							<i class="ti {{room_category.icon}} icon me-1"></i>
							{{room_category.name}}
						</span>
					</label>
					{% endfor %}
				</div>
			</div>
		</div>

		<div class="col-md-auto col-xl-auto col-md-3 ms-auto">
			{% include "room_search.html" %}
		</div>

	</div>
	{% if SETTINGS.ad_main_top %}
	<div class="ad-space ad-main-top">
		{{SETTINGS.ad_main_top|htmlspecialchars_decode|raw}}
	</div>
	{% endif %}

	{% if chat_rooms %}
		<div class="room-list-row mt-3" id="chat-room-loop">
			{% include "room_loop.html" %}
		</div>
		<div class="row">
			<input type="hidden" id="chat_room_cont"
				value="{{ SETTINGS.homepage_chat_room_limit?SETTINGS.homepage_chat_room_limit:6 }}">
			<div class="row justify-content-md-center  mb-3 mt-4">
				<div class="col-md-3 text-center">
					<div id="load-more-end" class="hidden">{{ _("You've Reached The End!") }}</div>
					<div id="load-more" class="hidden"><i class="ti ti-loader ti-spin"></i></div>
				</div>
			</div>
		</div>
	{% else %}	
		
		<div class="alert alert-important alert-info mt-3" role="alert">
			<i class="ti ti-heart-exclamation icon me-1"></i>
			No chat rooms on the radar yet. Looks like the party hasn’t started!
		</div>

	{% endif %}



	
	{% if SETTINGS.ad_main_bottom %}
	<div class="ad-space ad-main-bottom">
		{{SETTINGS.ad_main_bottom|htmlspecialchars_decode|raw}}
	</div>
	{% endif %}

</div>
{% endblock  %}