{%
	set stats = [
		{
			'stat': 'users',
			'count': '6,506',
			'description': 'up 12% since last month'
		},
		{
			'stat': 'posts',
			'count': '60,506',
			'description': 'up 6% since last month'
		},
		{
			'stat': 'comments',
			'count': '495,267',
			'description': 'up 2% since last month'
		}
	]
%}


{%
  set sections = [
  	{
		'title': 'content',
		'color': 'red',
		'content': [
	    {
			'icon': 'fa-pencil',
			'title': 'Reported Posts',
			'description': 'Community-flagged posts',
			'link': '/admin/reported/posts'
	    },
	    {
			'icon': 'fa-comment-alt',
			'title': 'Reported Comments',
			'description': 'Community-flagged comments',
			'link': '/admin/reported/comments'
	    },
	    {
			'icon': 'fa-image',
			'title': 'Image Posts',
			'description': 'User-uploaded media',
			'link': '/admin/image_posts'
	    },
	    {
			'icon': 'fa-align-slash',
			'title': 'Removed Posts',
			'description': 'Posts removed by mods',
			'link': '/admin/removed/posts'
	    },
	    {
			'icon': 'fa-comment-alt-slash',
			'title': 'Removed Comments',
			'description': 'Comments removed by mods',
			'link': '/admin/removed/comments'
	    }
	  ]
	},
	{
		'title': 'users',
		'color': 'blue',
		'content': [
	    {
			'icon': 'fa-ghost',
			'title': 'Shadow Banned',
			'description': 'Users currently shadow banned',
			'link': '/admin/shadowbanned'
	    },
	    {
			'icon': 'fa-republican',
			'title': 'Agenda Posters',
			'description': 'Users with agenda poster mode',
			'link': '/agendaposters'
	    },
	    {
			'icon': 'fa-seedling',
			'title': 'Grass Award',
			'description': 'Users with active grass award',
			'link': '/grassed'
	    },
	    {
			'icon': 'fa-users',
			'title': 'Users Feed',
			'description': 'Updated feed of sign ups',
			'link': '/admin/users'
	    }
	  ]
	},
	{
		'title': 'grant',
		'color': 'pink',
		'content': [
	    {
			'icon': 'fa-trophy',
			'title': 'Give Award',
			'description': 'Give users awards',
			'link': '/admin/awards'
	    },
	    {
			'icon': 'fa-badge',
			'title': 'Grant Badge',
			'description': 'Grant users badges',
			'link': '/admin/badge_grant'
	    }
	  ]
	},
	{
		'title': 'safety',
		'color': 'green',
		'content': [
	    {
			'icon': 'fa-ban',
			'title': 'Banned Domains',
			'description': 'Domains banned site-wide',
			'link': '/admin/banned_domains'
	    },
	    {
			'icon': 'fa-search',
			'title': 'Vote Fraud Analysis',
			'description': 'Check alt-account voting',
			'link': '/admin/alt_votes'
	    }
	  ]
	},
	{
		'title': 'Metrics',
		'color': 'purple',
		'content': [
	    {
			'icon': 'fa-list-ol',
			'title': 'Content stats',
			'description': 'Post, comment, etc. numbers',
			'link': '/stats'
	    },
	    {
			'icon': 'fa-chart-bar',
			'title': 'Content charts',
			'description': 'Visualize site stats',
			'link': '/charts'
	    }
	  ]
	},
	{
		'title': 'Meta',
		'color': 'gray',
		'content': [
	    {
			'icon': 'fa-wrench',
			'title': 'API access',
			'description': 'Approved apps',
			'link': '/admin/apps'
	    },
	    {
			'icon': 'fa-columns',
			'title': 'Sidebar',
			'description': 'Edit the frontpage sidebar',
			'link': '/admin/sidebar'
	    }
	  ]
	}
  ]
%}

{% extends "CHRISTMAS/default.html" %}

{% block title %}
<title>{{'SITE_NAME' | app_config}}</title>
<meta name="description" content="{{'SITE_NAME' | app_config}} Help">
{% endblock %}

{% block subHeader %}
<div class="relative max-w-screen-2xl mx-auto px-4 py-4 grid grid-cols-12 rounded-t">
		<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-t from-gray-300 to-gray-200 dark:bg-none dark:bg-gray-800 rounded-t sub-header-shadow dark:border-b dark:border-gray-700 sub-header"></div>
		<div class="relative col-span-full flex items-center">
		<div>
			<h1 class="font-bold text-xl font-heading leading-normal mb-0">
				Admin Dashboard
			</h1>
			<small class="block text-gray-700 dark:text-gray-400">
				Welcome agent, <strong>#{{ v.id }}</strong>.
			</small>
		</div>
		<div class="ml-auto flex space-x-2">
			<a href="/log?admin={{ v.username }}" class="btn btn-primary">
				<i class="fas fa-list fa-sm fa-fw mr-1"></i>
				Your activity
			</a>
			<a href="/notifications?modmail=true" class="btn btn-green">
				<i class="fas fa-envelope fa-sm fa-fw mr-1"></i>
				Mod mail
			</a>
			<span class="hidden md:inline-block">
				<a href="https://github.com/Aevann1/Drama" class="btn btn-purple">
					<i class="fab fa-github fa-sm fa-fw mr-1"></i>
					GitHub repo
				</a>
			</span>
		</div>
	</div>
</div>
{% endblock %}

{% block content %}
<div class="col-span-full xl:col-span-9 bg-gray-200 dark:bg-gray-800 p-4 md:px-0 space-y-8">

	<!-- <div class="hidden">
		<h2 class="hidden font-bold text-2xl md:text-3xl  font-heading leading-normal mb-4 pb-3 border-b border-gray-300 dark:border-gray-700">
			Metrics
		</h2>
		<div class="p-4 md:p-5 flex justify-between md:justify-around space-x-4 items-center rounded-md bg-gray-300 dark:bg-gray-700 shadow-inset-t-white-10 border border-gray-400 dark:border-gray-900">
			{% for section in stats %}
				<div class="md:px-5">
					<div class="text-black dark:text-gray-500 uppercase font-bold text-xs tracking-wider leading-4 mb-2">
						{{ section.stat }}
					</div>
					<h2 class="font-bold text-lg md:text-3xl font-heading leading-normal mb-2 text-shadow-light text-black dark:text-gray-200">{{ section.count }}</h2>
					<p class="flex items-center text-xs md:text-base text-gray-700 dark:text-gray-300">
						<i class="fas fa-caret-up text-lg text-green-400 mr-2"></i>
						<span>{{ section.description }}</span>
					</p>
				</div>
			{% endfor %}
		</div>
	</div>
 -->
	<div>
		<h2 class="hidden font-bold text-2xl md:text-3xl  font-heading leading-normal mb-4 pb-3 border-b border-gray-300 dark:border-gray-700">
			Links
		</h2>
		{% for section in sections %}
			<h2 class="font-bold text-lg font-heading leading-normal mb-0 capitalize">
				{{ section.title }}
			</h2>
			<div class="flex flex-wrap -mx-3 overflow-hidden mb-6">
				{% for item in section.content %}
				<div class="my-2 md:my-3 px-3 w-full md:w-1/2 overflow-hidden lg:w-1/3">
					<a href="{{ item.link }}" class="flex items-center p-3 md:px-5 md:py-4 rounded border border-gray-400 dark:border-gray-700 hover:bg-gray-300 dark:hover:bg-gray-700 h-full">
						<div class="flex flex-shrink-0 items-center justify-center w-9 h-9 md:w-12 md:h-12 rounded-sm bg-{{ section.color }}-200 shadow-inner-white-10">
							<i class="fas {{ item.icon }} fa-fw md:text-lg text-{{ section.color }}-600"></i>
						</div>
						<div class="pl-3 md:pl-4">
							<h3 class="font-bold text-base font-heading leading-normal mb-0 capitalize text-black dark:text-gray-200 break-words" style="word-break: break-word;">
								{{ item.title }}
							</h3>
							<p class="text-sm md:text-base text-gray-500 break-words" style="word-break: break-word;">
								{{ item.description }}
							</p>
						</div>
					</a>
				</div>
				{% endfor %}
			</div>
		{% endfor %}
	</div>

</div>
{% endblock %}

{% block sidebar %}
	{% include 'CHRISTMAS/sidebars/AdminSidebar.html' %}
{% endblock %}