{% embed "overall_header.html" %}
	{% block header_content %}
		<h1 class="text-slate-50 md:text-2xl text-xl memberlist-title">{{ lang('GROUPSUB_PACKAGE_LIST') }}</h1>
	{% endblock %}
{% endembed %}

{% if HEADER %}
<div class="panel bg2">
  <div class="inner">
  	<div class="postbody">
  	  <div class="content">{{ HEADER }}</div>
  	</div>
  </div>
</div>
{% endif %}


{% for p in package %}
  <div class="card {{ loop.first ? 'mb-4' : 'my-4' }}">
  	<div class="flex items-center justify-between card-title">
  		<h2 class="package-title">{{ p.NAME }}</h2>
  		{% if zeina.collapse_panel %}
  		<div class="collapse-panel zn-collapse-toggle open leading-[0] py-0.5 px-1 hover:cursor-pointer" data-zn-collapse="#zn-package-collapse-{{ loop.index }}">
  			<div class="zn-collapse-open:[transform:rotate(180deg)] transition-all duration-300"><i class="iconify" data-mode="style" data-icon="ri:arrow-down-s-line" data-width="18" data-height="18" aria-hidden="true"></i></div>
  		</div>
  		{% endif %}
  	</div>
  	<div id="zn-package-collapse-{{ loop.index }}" class="zn-collapse w-full overflow-hidden" aria-labelledby="zn-package-collapse-{{ loop.index }}">
  		<div class="p-4 divide-y">
        <div class="md:grid grid-cols-2 flex flex-col gap-4">
          <div>{% if p.DESC %}{{ p.DESC }}{% else %}<i>{{ lang('GROUPSUB_NO_DESC') }}</i>{% endif %}</div>
          <div>
            <div class="inner p-3 border border-gray-200 rounded-lg dark:border-slate-800">

        			<h4>{{ lang('GROUPSUB_CHOOSE_TERM', p.NAME) }}</h4>

        			<form action="{{ U_ACTION }}" method="post">
        				<fieldset class="leading-relaxed">
        	{% if p.term|length == 1 %}
        		{% for t in p.term %}
        					<input type="hidden" name="term_id" value="{{ t.ID }}">
        					<p class="text-sm mt-1">{{ t.PRICE }} / {% if t.LENGTH %}{{ t.LENGTH }}{% else %}<b>{{ lang('GROUPSUB_LENGTH_UNLIMITED') }}</b>{% endif %}</p>
        		{% endfor %}
        	{% elseif p.term|length > 6 %}
        					<p>
        						<select class="inputbox" name="term_id">
        		{% for t in p.term %}
        							<option value="{{ t.ID }}">{{ t.PRICE }} / {% if t.LENGTH %}{{ t.LENGTH }}{% else %}{{ lang('GROUPSUB_LENGTH_UNLIMITED') }}{% endif %}</option>
        		{% endfor %}
        						</select>
        					</p>
        	{% else %}
                  <div class="flex max-md:flex-col">
        		{% for t in p.term %}
        						<label class="radio-label"><input class="radio-primary" type="radio" name="term_id" value="{{ t.ID }}">{{ t.PRICE }} / {% if t.LENGTH %}{{ t.LENGTH }}{% else %}<b>{{ lang('GROUPSUB_LENGTH_UNLIMITED') }}</b>{% endif %}</label>
        		{% endfor %}
        					</div>
        	{% endif %}
        	{% if p.S_ACTIVE %}
        					<p{% if p.S_WARNING %} style="color: #f00"{% endif %}>{% if p.EXPIRES %}{{ lang('GROUPSUB_SUBSCRIBED_UNTIL', p.EXPIRES) }}{% else %}{{ lang('GROUPSUB_SUBSCRIBED') }}{% endif %}</p>
        					{% if p.EXPIRES %}<input class="btn-primary ripple justify-center max-md:w-full" type="submit" name="submit" value="{{ lang('GROUPSUB_RENEW') }}">{% endif %}
        	{% else %}
        					<input class="btn-primary ripple justify-center max-md:w-full mt-2" type="submit" name="submit" value="{{ lang('GROUPSUB_SUBSCRIBE') }}">
        	{% endif %}
        				</fieldset>
        			</form>

        		</div>

          </div>
        </div>
      </div>
    </div>
  </div>

{% else %}
<div class="panel bg1">
  <div class="inner">
  	<p>{{ lang('GROUPSUB_NO_PACKAGES') }}</p>
  </div>
</div>
{% endfor %}

{% if FOOTER %}
<div class="panel bg2">
  <div class="inner">
  	<div class="postbody">
    	<div class="content">{{ FOOTER }}</div>
  	</div>
  </div>
</div>
{% endif %}

{% include 'overall_footer.html' %}