{% INCLUDECSS '@phpbb_boardrules/boardrules_controller.css' %}
{% embed "overall_header.html" %}
  {% block header_content %}
    <h1 class="text-slate-50 md:text-2xl text-xl">{{ lang('BOARDRULES_CATEGORIES') }}</h1>
  {% endblock %}
{% endembed %}


{% if S_CATEGORIES %}
  <div class="lg:grid flex flex-col-reverse grid-cols-10 gap-2 lg:mt-2 my-4">
    <div class="col-span-8 card p-4">
{% endif %}

<div id="cp-main" class="cp-main mcp-main panel-container p-2">
  <div class="boardrules-container">
    <h2 class="boardrules-header mb-0.5">{{ lang('BOARDRULES_HEADER') }}</h2>
	  <p class="text-sm text-secondary">{{ BOARDRULES_EXPLAIN }}</p>

  	<div id="main" class="content mt-2">
  		<ol class="boardrules-rules{{ BOARDRULES_LIST_STYLE ? ' br-list-style-' ~ BOARDRULES_LIST_STYLE }}">
  			{% for rules in loops.rules %}
  				{% if rules.S_CLOSE_LIST %}
  						</ol>
  					</li>
  				{% elseif rules.S_IS_CATEGORY %}
  					<li id="{{ rules.U_ANCHOR }}">
  						<h3 class="text-sm">{{ rules.TITLE }}</h3>
  						<ol{{ BOARDRULES_LIST_STYLE ? ' class="mt-2 br-list-style-' ~ BOARDRULES_LIST_STYLE ~ '"' : ' class="mt-2"' }}>
  				{% else %}
  							<li class="rule-item text-sm" id="{{ rules.U_ANCHOR }}">
  								{{ rules.MESSAGE }} <a class="rule-anchor postlink" href="#{{ rules.U_ANCHOR }}">#</a>
  							</li>
  				{% endif %}
  			{% endfor %}
  		</ol>
  	</div>
  </div>
</div>

{% if S_CATEGORIES %}
    </div>
    <div class="col-span-2 card p-2 max-lg:mb-4" style="height: max-content;">
			<h3 class="border-b font-medium text-sm p-2 dark:border-slate-800">{{ lang('BOARDRULES_CATEGORIES') }}</h3>
      <ul class="boardrules-menu flex flex-col gap-y-1">
				{% for rules in loops.rules %}
					{% if rules.S_IS_CATEGORY %}<li class="flex"><a href="#{{ rules.U_ANCHOR }}" class="dropdown-item gap-2 ripple w-full">{{ rules.TITLE }}</a></li>{% endif %}
				{% endfor %}
			</ul>
    </div>
  </div>
{% endif %}


{% INCLUDEJS '@phpbb_boardrules/boardrules_controller.js' %}
{% INCLUDE 'overall_footer.html' %}