{% extends "layout.html" %}

{% block content %}
	<div class="body">
		<div class="sidebar">
		<div class="profile">
			<div class="information">
				<div class="avatar">
					<img src="
					{% if config("minecraft-enabled") == "Enabled" %}
					https://minotar.net/avatar/{{ basket.ign is empty ?  'Steve' : basket.ign }}
					{% else %}
					https://i.imgur.com/HRNZvmQ.png
					{% endif %}
					">
					</div>
					<div class="info">
						<div class="main">Logged as</div>
						<div class="sub">{{ basket.ign is empty ?  'Guest' : basket.ign }}</div>
					</div>
					<div class="settings">
						<div class="logout visible-desk">
                            {% if basket.ign  %}
							<a href="/checkout/logout">
								<i data-toggle="tooltip" title="Click to logout" class="fas fa-sign-out-alt"></i>
							</a>
                            {% else %}
							<a href="/login">
								<i data-toggle="tooltip" title="Click to login" class="fas fa-sign-in-alt"></i>
							</a>
                            {% endif %}
                                
						</div>
						{% if basket.ign %}
						<div class="basket" data-toggle="modal" data-target="#basketModal">
							<i data-toggle="tooltip" title="Checkout" class="fas fa-shopping-basket"></i>
						</div>
						{% endif %}
					</div>
				</div>
			</div>	    
          <nav class="navbar navbar-default" role="navigation">
    
              <div class="navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="{% if page.category == "index" %}active{% endif %}"><a href="/">{{ __("Home") }}</a></li>
                    {% for category in store.categories %}
                      {% if category.subcategories|length > 0 %}
                        <li class="sleek-dropdown dropdown {% if category.active %}active{% endif %}">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ category.name }} <i class="fa fa-caret-down"></i></a>
                            <ul class="dropdown-menu">
                              {% for subcategory in category.subcategories %}
                                <li><a href="/category/{{ subcategory.id }}">{{ subcategory.name }}</a></li>
                              {% endfor %}
                            </ul>
                      {% else %}
                        <li class="{% if category.active %}active{% endif %}"><a href="/category/{{ category.id }}">{{ category.name }}</a></li>
                      {% endif %}
                    {% endfor %}
                    {% for page in store.pages %}
                        <li class="{% if page.active %}active{% endif %}"><a href="/{{ page.slug }}">{{ page.title }}</a></li>
                    {% endfor %}                
                    {% if basket.username %} 
                        <li class="visible-xs"><a href="/checkout/logout">{{ __("Logout") }}</a></li>
                    {% endif %}
                </ul>
              </div>
          </nav>		    
			{{ modules|raw }}
		</div>	 	    
		<div class="content">
			<div class="panel panel-default">
				{% if category.description == "" %}
					<div class="panel-heading">{{ category.name }}</div>
				{% endif %}
				<div class="panel-body">
        			{% if category.description != "" %}
        				<div class="announce">
                                <div class="bar" style="animation: unset;">
                                        <i class="fas fa-info-circle"></i>
                                        <span class="text">{{ category.description|raw }}</span>
                                </div>
                            </div>
        			{% endif %}				    
					{% if category.packages|length > 0 %}
					    <div class="category">
    						{% if category.displayType == "list" %}
                                <div class="packages-row">
                                    <table class="table table-hover table-striped">
    							        <tbody>
        									{% for package in category.packages %}
        									    <tr>
                                                  <td class="name">{{ package.name }} {% if package.countdownEnds %}<span class="text-danger">&nbsp;&nbsp;<i class="fa fa-clock-o"></i> <span class="countdown-to" data-countdown="{{ package.countdownEnds }}">{{ __("Ending Soon!") }}</span></span>{% endif %}</td>
                                                  <td class="price">
                                                    {% if package.customPrice == false and package.price > 0 %}
        						                        {% if package.discount.applied %}
        						                  		    <span class="discount">{{ package.discount.original|money }}</span>
        						                  		{% endif %}
        												{{ package.price|money }} <small>{{ basket.currency }}</small>
        											{% endif %}
                                                  </td>
                                                  <td class="button">
                                                    {% if package.basket %}
        					                  			<a href="/checkout/packages/remove/{{ package.id }}" class="btn btn-sm btn-danger btn-block">{{ __("Remove") }}</a>
        					                  		{% else %}
        											    <a href="javascript::void(0);" data-remote="/package/{{ package.id }}" class="btn btn-sm btn-info btn-block toggle-modal">{{ __("Buy") }}</a>
        											{% endif %}
                                                  </td>
                                                </tr>
        									{% endfor %}
    							        </tbody>
    						        </table>
    						    </div>
    						{% else %}
    						    <div class="packages-image">
        							{% for package in category.packages %}
        							    <div class="package">
                                            <div class="image">
                                                <a href="javascript:void(0);" data-remote="/package/{{ package.id }}" class="toggle-modal">
                                                    <img src="{{ package.image.url }}" class="toggle-tooltip {% if package.image.borderless %}img-rounded{% else %}img-thumbnail{% endif %}" title="{{ __("Click for more details") }}" />
                                                </a>
                                            </div>
                                            <div class="info">
                                              <div class="text">
                                                <div class="name">{{ package.name[:20] }}
                                                   {% if package.countdownEnds %}<br /><span class="text-danger"><i class="fa fa-clock-o"></i> <span class="countdown-to" data-countdown="{{ package.countdownEnds }}">{{ __("Ending Soon!") }}</span></span>{% endif %}
                                                </div>
                                                <div class="price">
                                                    {% if package.customPrice == false and package.price > 0.00 %}
        												{% if package.discount.applied %}
        				                  					<span class="discount">{{ package.discount.original|money }}</span>
        				                  				{% endif %}
        												{{ package.price|money }} <small>{{ basket.currency }}</small>
        											{% endif %}
        										</div>
                                              </div>
                                              <div class="button">
                                                {% if package.basket %}
        		                  					<a href="/checkout/packages/remove/{{ package.id }}" class="btn btn-sm btn-danger btn-block">{{ __("Remove") }}</a>
        		                  				{% else %}
        											<a href="javascript::void(0);" data-remote="/package/{{ package.id }}" class="btn btn-sm btn-info btn-block toggle-modal">{{ __("Buy") }}</a>
        										{% endif %}
                                              </div>
                                            </div>
                                        </div>
        							{% endfor %}
        						</div>
    						{% endif %}
    					</div>
					{% else %}
						{{ __("No packages to display in this category.") }}
					{% endif %}
				</div>
			</div>
		</div>
	</div>
{% endblock %}