From 22c6a931d90d3d0c676fbfe8bfc6ff393fc9a61e Mon Sep 17 00:00:00 2001
From: sephger <contact@sephger.de>
Date: Tue, 16 Apr 2024 15:25:22 +0200
Subject: [PATCH] Raid Page

---
 tailwind/custom/components/widgets.css        |   2 +-
 tailwind/tailwind.config.js                   | 101 +++---
 tailwind/tailwind.css                         |   5 +
 theme/components/toggle-button.php            |  25 ++
 theme/footer.php                              |  34 +-
 theme/functions.php                           | 310 +++++++++++-------
 theme/header.php                              |  29 +-
 theme/inc/config-routing.php                  |  20 ++
 theme/index.php                               |   3 +-
 theme/lang/deu.json                           |   5 +-
 theme/pages/raids.php                         |  55 ++--
 theme/pages/roster.php                        |  25 +-
 theme/pages/single_raid.php                   | 184 +++++++++++
 theme/theme.json                              |   5 +
 theme/wowpress/Api/BattleNet.php              |   8 +-
 .../Database/CreateCharacterTable.php         |   4 +-
 theme/wowpress/Database/CreateRaidTable.php   |   2 +-
 theme/wowpress/Frontend/ToggleButton.php      |  51 +++
 theme/wowpress/Models/Character.php           |  35 +-
 theme/wowpress/Models/Raid.php                |  40 +++
 20 files changed, 668 insertions(+), 275 deletions(-)
 create mode 100644 theme/components/toggle-button.php
 create mode 100644 theme/pages/single_raid.php
 create mode 100644 theme/wowpress/Frontend/ToggleButton.php

diff --git a/tailwind/custom/components/widgets.css b/tailwind/custom/components/widgets.css
index a89a67c..3fc61ff 100644
--- a/tailwind/custom/components/widgets.css
+++ b/tailwind/custom/components/widgets.css
@@ -12,7 +12,7 @@
 .top-title {
     order: 1;
     grid-area: 1 / 2 / 2 / 3;
-    @apply bg-glass shadow text-4xl font-bold text-center p-2;
+    margin-bottom: var(--wowp-gap);
 }
 
 .content {
diff --git a/tailwind/tailwind.config.js b/tailwind/tailwind.config.js
index a68d856..458e02f 100644
--- a/tailwind/tailwind.config.js
+++ b/tailwind/tailwind.config.js
@@ -1,5 +1,6 @@
 // Set the Preflight flag based on the build target.
 const includePreflight = 'editor' === process.env._TW_TARGET ? false : true;
+import themejson from '@_tw/themejson';
 import plugin from 'tailwindcss/plugin';
 
 module.exports = {
@@ -17,29 +18,12 @@ module.exports = {
 		extend: {
 		},
 	},
-	daisyui: {
-		themes: [
-			{
-				wowpress: {
-					"primary": "#a991f7",
-					"secondary": "#f6d860",
-					"accent": "#37cdbe",
-					"neutral": "#fff",
-					"base-100": "#ffffff",
-					"primary-content": "#fff",
-					"--rounded-box": "0rem", // border radius rounded-box utility class, used in card and other large boxes
-					"--rounded-btn": "0rem", // border radius rounded-btn utility class, used in buttons and similar element
-					"--rounded-badge": "0rem", 
-				}
-			}
-		]
-	},
 	corePlugins: {
 		// Disable Preflight base styles in builds targeting the editor.
 		preflight: includePreflight,
 	},
 	plugins: [
-	//	require('daisyui'),
+		//	require('daisyui'),
 		// Add Tailwind Typography (via _tw fork).
 		require('@_tw/typography'),
 
@@ -47,52 +31,53 @@ module.exports = {
 		require('@_tw/themejson'),
 
 		// Uncomment below to add additional first-party Tailwind plugins.
-		 require('@tailwindcss/forms'),
-		 require('@tailwindcss/aspect-ratio'),
-		 require('@tailwindcss/container-queries'),
-		 plugin(function({theme, addUtilities}) {
-			const colorUtilities={};
+		require('@tailwindcss/forms'),
+		require('@tailwindcss/aspect-ratio'),
+		require('@tailwindcss/container-queries'),
+		plugin(function ({ theme, addUtilities }) {
+			const colorUtilities = {};
 			const colors = theme('colors');
-			for (const color in colors){
-				if(typeof colors[color] === 'object'){
-				   colorUtilities[`.button-${color}`] = {
-					'background': colors[color]['400'],
-					'color': colors[color]['800'],
-					'border': '1px solid '+colors[color]['800'],
-					'outline': colors[color]['800'],
-					'&:hover': {
-						'background': colors[color]['300'],
-						'border': '1px solid'+ colors[color]['900']
-					}
-				   }
-				   colorUtilities[`.badge-${color}`] = {
-					'background': colors[color]['200'],
-					'color': colors[color]['800'],
-					'border-color': colors[color]['800'],
-				   }
-				   colorUtilities[`.alert-${color}`] = {
-					'background': colors[color]['200'],
-					'color': colors[color]['800'],
-					'border-color': colors[color]['800'],
-				   }
-				   colorUtilities[`.disabled-${color}`] = {
-					'--disabled-color' :  colors[color]['500'],
-				   } 
-				   colorUtilities[`.enabled-${color}`] = {
-					'--enabled-color' :  colors[color]['500'],
-				   } 
+			const themecolors = themejson().config.theme.extend.colors;
+			for (const color in themecolors){
+				colorUtilities[`.btn-${color}`] = {
+					'--btn-color': themecolors[color]
 				}
 			}
-			
+			for (const color in colors) {
+				if (typeof colors[color] === 'object') {
+					if (colors[color]['500'] !== undefined) {
+						colorUtilities[`.btn-${color}`] = {
+							'--btn-color': colors[color]['500']
+						}
+						colorUtilities[`.badge-${color}`] = {
+							'background': colors[color]['200'],
+							'color': colors[color]['800'],
+							'border-color': colors[color]['800'],
+						}
+						colorUtilities[`.alert-${color}`] = {
+							'background': colors[color]['200'],
+							'color': colors[color]['800'],
+							'border-color': colors[color]['800'],
+						}
+						colorUtilities[`.disabled-${color}`] = {
+							'--disabled-color': colors[color]['500'],
+						}
+						colorUtilities[`.enabled-${color}`] = {
+							'--enabled-color': colors[color]['500'],
+						}
+					}
+				}
+			}
+
+
 			addUtilities(colorUtilities);
 		})
 	],
 	safelist: [
-        {pattern: /button-+/},
-        {pattern: /badge-+/},
-        {pattern: /alert-+/},
-        {pattern: /bg-[^/]+-200$/},
-        {pattern: /text-+/},
-        {pattern: /border-[^/]+-700$/},
+		{ pattern: /btn-([a-zA-Z]+)$/ },
+		{ pattern: /bg-([a-zA-Z]+)$/, variants: ['has-\[\:checked\]']},
+		{ pattern: /text-([a-zA-Z]+)$/, variants: ['hover', 'group-hover','has-\[\:checked\]'] },
+		{ pattern: /shadow-([a-zA-Z]+)$/ },
+		{ pattern: /border-([a-zA-Z]+)$/ },
 	]
 };
diff --git a/tailwind/tailwind.css b/tailwind/tailwind.css
index bd6a934..c63060b 100644
--- a/tailwind/tailwind.css
+++ b/tailwind/tailwind.css
@@ -57,11 +57,16 @@
     padding: var(--wowp-gap);
 }
 
+.gap-auto{
+    gap: var(--wowp-gap);
+}
+
 body {
     background-color: unset;
     --body-bg: url('https://nebelkrieger.de/wp-content/uploads/2023/05/F8lCEpyWoAAFCFS-scaled.jpg');
     position: relative;
 z-index: -10;
+    @apply min-h-screen;
 }
 
 .bg-glass {
diff --git a/theme/components/toggle-button.php b/theme/components/toggle-button.php
new file mode 100644
index 0000000..1b2a1b6
--- /dev/null
+++ b/theme/components/toggle-button.php
@@ -0,0 +1,25 @@
+<?php
+use WoWPress\Frontend\Icon;
+?>
+<div>
+    <label style="" for="tb_<?= $this->id ?>" class="w-full flex <?= $this->row ? 'flex-row gap-2' : 'flex-col' ?> items-center justify-center h-auto select-none cursor-pointer border py-3 px-6
+     font-bold border-<?=$this->color_no?>  transition-colors duration-200 ease-in-out has-[:checked]:bg-<?=$this->color_yes?> has-[:checked]:text-black has-[:checked]:border-<?=$this->color_yes?> ">
+        <input type="<?= $this->type ?>" id="tb_<?= $this->id ?>" name="<?= $this->name ?>" class="peer group hidden" <?= $this->disabled ? 'disabled' : '' ?> <?= $this->checked ? 'checked' : '' ?> />
+        <div class="peer-checked:block hidden">
+            <?php
+            if ($this->icons) : ?>
+                <?= Icon::get($this->icon_yes) ?>
+            <?php else : ?>
+                Ja
+            <?php endif; ?>
+        </div>
+        <div class="peer-checked:hidden block">
+            <?php if ($this->icons) : ?>
+                <?= Icon::get($this->icon_no) ?>
+            <?php else : ?>
+                Nein
+            <?php endif; ?>
+        </div>
+        <?= $this->text ?>
+    </label>
+</div>
\ No newline at end of file
diff --git a/theme/footer.php b/theme/footer.php
index 93d54dd..0f9b192 100644
--- a/theme/footer.php
+++ b/theme/footer.php
@@ -1,4 +1,5 @@
 <?php
+
 /**
  * The template for displaying the footer
  *
@@ -12,36 +13,23 @@
 ?>
 
 </div><!-- #content -->
-<?php
-if ($GLOBALS['wowpress']['widget_area']['right'] !== false) :
-?>
+<?php if (is_active_sidebar('right-widgets') && get_sidebar_status('right')) : ?>
 	<div class="widget-wrapper right-widgets">
-		<div id="demo-widget" class="widget">
-			<h3>Titel Right 1</h3>
-		</div>
-		<div id="demo-widget" class="widget">
-			<h3>Titel Right 2</h3>
-		</div>
+		<?php dynamic_sidebar('right-widgets'); ?>
 	</div>
-<?php
-endif;
-if ($GLOBALS['wowpress']['widget_area']['bottom'] !== false) :
-?>
-	<div class="widget-wrapper bottom-widgets">
-		<div id="demo-widget" class="widget">
-			<h3>Titel Bottom 1</h3>
-		</div>
-		<?php get_template_part('template-parts/layout/footer', 'content'); ?>
+<?php endif; ?>
 
-	</div>
-<?php
-endif;
-?>
 </div> <!-- grid -->
 
+<div class="sticky top-[100vh]">
+<?php if (is_active_sidebar('bottom-widgets') && get_sidebar_status('bottom')) : ?>
+	<div class="widget-wrapper bottom-widgets">
+		<?php dynamic_sidebar('bottom-widgets'); ?>
+	</div>
+<?php endif; ?>
 
 <?php wp_footer(); ?>
-
+</div>
 
 </body>
 
diff --git a/theme/functions.php b/theme/functions.php
index c721066..dae8114 100644
--- a/theme/functions.php
+++ b/theme/functions.php
@@ -20,7 +20,7 @@ require_once('vendor/autoload.php');
  */
 
 
-if ( ! defined( 'WOWPRESS_VERSION' ) ) {
+if (!defined('WOWPRESS_VERSION')) {
 	/*
 	 * Set the theme’s version number.
 	 *
@@ -28,10 +28,10 @@ if ( ! defined( 'WOWPRESS_VERSION' ) ) {
 	 * to create your production build, the value below will be replaced in the
 	 * generated zip file with a timestamp, converted to base 36.
 	 */
-	define( 'WOWPRESS_VERSION', '0.1.0' );
+	define('WOWPRESS_VERSION', '0.1.0');
 }
 
-if ( ! defined( 'WOWPRESS_TYPOGRAPHY_CLASSES' ) ) {
+if (!defined('WOWPRESS_TYPOGRAPHY_CLASSES')) {
 	/*
 	 * Set Tailwind Typography classes for the front end, block editor and
 	 * classic editor using the constant below.
@@ -55,7 +55,7 @@ if ( ! defined( 'WOWPRESS_TYPOGRAPHY_CLASSES' ) ) {
 	);
 }
 
-if ( ! function_exists( 'wowpress_setup' ) ) :
+if (!function_exists('wowpress_setup')) :
 	/**
 	 * Sets up theme defaults and registers support for various WordPress features.
 	 *
@@ -63,18 +63,19 @@ if ( ! function_exists( 'wowpress_setup' ) ) :
 	 * runs before the init hook. The init hook is too late for some features, such
 	 * as indicating support for post thumbnails.
 	 */
-	function wowpress_setup() {
-		
+	function wowpress_setup()
+	{
+
 		/*
 		 * Make theme available for translation.
 		 * Translations can be filed in the /languages/ directory.
 		 * If you're building a theme based on WowPress, use a find and replace
 		 * to change 'wowpress' to the name of your theme in all the template files.
 		 */
-		load_theme_textdomain( 'wowpress', get_template_directory() . '/languages' );
+		load_theme_textdomain('wowpress', get_template_directory() . '/languages');
 
 		// Add default posts and comments RSS feed links to head.
-		add_theme_support( 'automatic-feed-links' );
+		add_theme_support('automatic-feed-links');
 
 		/*
 		 * Let WordPress manage the document title.
@@ -82,20 +83,20 @@ if ( ! function_exists( 'wowpress_setup' ) ) :
 		 * hard-coded <title> tag in the document head, and expect WordPress to
 		 * provide it for us.
 		 */
-		add_theme_support( 'title-tag' );
+		add_theme_support('title-tag');
 
 		/*
 		 * Enable support for Post Thumbnails on posts and pages.
 		 *
 		 * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/
 		 */
-		add_theme_support( 'post-thumbnails' );
+		add_theme_support('post-thumbnails');
 
 		// This theme uses wp_nav_menu() in two locations.
 		register_nav_menus(
 			array(
-				'menu-1' => __( 'Primary', 'wowpress' ),
-				'menu-2' => __( 'Footer Menu', 'wowpress' ),
+				'menu-1' => __('Primary', 'wowpress'),
+				'menu-2' => __('Footer Menu', 'wowpress'),
 			)
 		);
 
@@ -117,52 +118,52 @@ if ( ! function_exists( 'wowpress_setup' ) ) :
 		);
 
 		// Add theme support for selective refresh for widgets.
-		add_theme_support( 'customize-selective-refresh-widgets' );
+		add_theme_support('customize-selective-refresh-widgets');
 
 		// Add support for editor styles.
-		add_theme_support( 'editor-styles' );
+		add_theme_support('editor-styles');
 
 		// Enqueue editor styles.
-		add_editor_style( 'style-editor.css' );
-		add_editor_style( 'style-editor-extra.css' );
+		add_editor_style('style-editor.css');
+		add_editor_style('style-editor-extra.css');
 
 		// Add support for responsive embedded content.
-		add_theme_support( 'responsive-embeds' );
+		add_theme_support('responsive-embeds');
 
 		// Remove support for block templates.
-		remove_theme_support( 'block-templates' );
-
-	
+		remove_theme_support('block-templates');
 	}
 endif;
 
-if ( ! function_exists( 'wowpress_database' ) ) :
+if (!function_exists('wowpress_database')) :
 
-	function wowpress_database(){
+	function wowpress_database()
+	{
 		global $wpdb;
-		require_once( ABSPATH . 'wp-admin/includes/upgrade.php' );
-		dbDelta( [
+		require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
+		dbDelta([
 			CreateCharacterTable::sql(),
 			CreateCacheTable::sql(),
 			CreateRaidTable::sql(),
-		] );
+		]);
 	}
 
 endif;
 
-add_action( 'after_setup_theme', 'wowpress_setup' );
-add_action( 'after_switch_theme','wowpress_database');
+add_action('after_setup_theme', 'wowpress_setup');
+add_action('after_switch_theme', 'wowpress_database');
 /**
  * Register widget area.
  *
  * @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar
  */
-function wowpress_widgets_init() {
+function wowpress_widgets_init()
+{
 	register_sidebar(
 		array(
-			'name'          => __( 'Footer', 'wowpress' ),
-			'id'            => 'bottom-widgets',
-			'description'   => __( 'Add widgets here to appear in your footer.', 'wowpress' ),
+			'name'          => __('Header', 'wowpress'),
+			'id'            => 'top-widgets',
+			'description'   => __('Add widgets here to appear on the header.', 'wowpress'),
 			'before_widget' => '<section id="%1$s" class="widget %2$s">',
 			'after_widget'  => '</section>',
 			'before_title'  => '<h2 class="widget-title">',
@@ -171,9 +172,31 @@ function wowpress_widgets_init() {
 	);
 	register_sidebar(
 		array(
-			'name'          => __( 'Linke Seite', 'wowpress' ),
+			'name'          => __('Linke Seite', 'wowpress'),
 			'id'            => 'left-widgets',
-			'description'   => __( 'Add widgets here to appear on the left side.', 'wowpress' ),
+			'description'   => __('Add widgets here to appear on the left side.', 'wowpress'),
+			'before_widget' => '<section id="%1$s" class="widget %2$s">',
+			'after_widget'  => '</section>',
+			'before_title'  => '<h2 class="widget-title">',
+			'after_title'   => '</h2>',
+		)
+	);
+	register_sidebar(
+		array(
+			'name'          => __('Rechte Seite', 'wowpress'),
+			'id'            => 'right-widgets',
+			'description'   => __('Add widgets here to appear on the right side.', 'wowpress'),
+			'before_widget' => '<section id="%1$s" class="widget %2$s">',
+			'after_widget'  => '</section>',
+			'before_title'  => '<h2 class="widget-title">',
+			'after_title'   => '</h2>',
+		)
+	);
+	register_sidebar(
+		array(
+			'name'          => __('Footer', 'wowpress'),
+			'id'            => 'bottom-widgets',
+			'description'   => __('Add widgets here to appear in your footer.', 'wowpress'),
 			'before_widget' => '<section id="%1$s" class="widget %2$s">',
 			'after_widget'  => '</section>',
 			'before_title'  => '<h2 class="widget-title">',
@@ -181,25 +204,27 @@ function wowpress_widgets_init() {
 		)
 	);
 }
-add_action( 'widgets_init', 'wowpress_widgets_init' );
+add_action('widgets_init', 'wowpress_widgets_init');
 
 /**
  * Enqueue scripts and styles.
  */
-function wowpress_scripts() {
-	wp_enqueue_style( 'wowpress-style', get_stylesheet_uri(), array(), WOWPRESS_VERSION );
-	wp_enqueue_script( 'wowpress-script', get_template_directory_uri() . '/js/script.min.js', array(), WOWPRESS_VERSION, true );
+function wowpress_scripts()
+{
+	wp_enqueue_style('wowpress-style', get_stylesheet_uri(), array(), WOWPRESS_VERSION);
+	wp_enqueue_script('wowpress-script', get_template_directory_uri() . '/js/script.min.js', array(), WOWPRESS_VERSION, true);
 
-	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
-		wp_enqueue_script( 'comment-reply' );
+	if (is_singular() && comments_open() && get_option('thread_comments')) {
+		wp_enqueue_script('comment-reply');
 	}
 }
-add_action( 'wp_enqueue_scripts', 'wowpress_scripts' );
+add_action('wp_enqueue_scripts', 'wowpress_scripts');
 
 /**
  * Enqueue the block editor script.
  */
-function wowpress_enqueue_block_editor_script() {
+function wowpress_enqueue_block_editor_script()
+{
 	wp_enqueue_script(
 		'wowpress-editor',
 		get_template_directory_uri() . '/js/block-editor.min.js',
@@ -211,15 +236,16 @@ function wowpress_enqueue_block_editor_script() {
 		true
 	);
 }
-add_action( 'enqueue_block_editor_assets', 'wowpress_enqueue_block_editor_script' );
+add_action('enqueue_block_editor_assets', 'wowpress_enqueue_block_editor_script');
 
 /**
  * Enqueue the script necessary to support Tailwind Typography in the block
  * editor, using an inline script to create a JavaScript array containing the
  * Tailwind Typography classes from WOWPRESS_TYPOGRAPHY_CLASSES.
  */
-function wowpress_enqueue_typography_script() {
-	if ( is_admin() ) {
+function wowpress_enqueue_typography_script()
+{
+	if (is_admin()) {
 		wp_enqueue_script(
 			'wowpress-typography',
 			get_template_directory_uri() . '/js/tailwind-typography-classes.min.js',
@@ -230,10 +256,10 @@ function wowpress_enqueue_typography_script() {
 			WOWPRESS_VERSION,
 			true
 		);
-		wp_add_inline_script( 'wowpress-typography', "tailwindTypographyClasses = '" . esc_attr( WOWPRESS_TYPOGRAPHY_CLASSES ) . "'.split(' ');", 'before' );
+		wp_add_inline_script('wowpress-typography', "tailwindTypographyClasses = '" . esc_attr(WOWPRESS_TYPOGRAPHY_CLASSES) . "'.split(' ');", 'before');
 	}
 }
-add_action( 'enqueue_block_assets', 'wowpress_enqueue_typography_script' );
+add_action('enqueue_block_assets', 'wowpress_enqueue_typography_script');
 
 /**
  * Add the Tailwind Typography classes to TinyMCE.
@@ -241,11 +267,12 @@ add_action( 'enqueue_block_assets', 'wowpress_enqueue_typography_script' );
  * @param array $settings TinyMCE settings.
  * @return array
  */
-function wowpress_tinymce_add_class( $settings ) {
+function wowpress_tinymce_add_class($settings)
+{
 	$settings['body_class'] = WOWPRESS_TYPOGRAPHY_CLASSES;
 	return $settings;
 }
-add_filter( 'tiny_mce_before_init', 'wowpress_tinymce_add_class' );
+add_filter('tiny_mce_before_init', 'wowpress_tinymce_add_class');
 
 /**
  * Custom template tags for this theme.
@@ -269,8 +296,8 @@ add_filter('show_admin_bar', '__return_false');
  * Variable initialization
  */
 
- // Show Widgets
- $GLOBALS['wowpress']['widget_area'] = [
+// Show Widgets
+$GLOBALS['wowpress']['sidebar'] = [
 	'left' => true,
 	'right' => true,
 	'top' => true,
@@ -278,7 +305,7 @@ add_filter('show_admin_bar', '__return_false');
 ];
 
 // Colors
-$GLOBALS['wowpress']['theme'] = json_decode( file_get_contents( get_template_directory() . "/theme.json"),true);
+$GLOBALS['wowpress']['theme'] = json_decode(file_get_contents(get_template_directory() . "/theme.json"), true);
 
 
 /**
@@ -292,85 +319,134 @@ require get_template_directory() . '/inc/config-routing.php';
  * Neue Werte für Kategorien
  */
 
- function wowpress_color_picker_scripts() {
-	wp_enqueue_style( 'wp-color-picker' );
-	wp_enqueue_script( 'cp-active', get_template_directory_uri()."/plugins/cp-active.js", array('wp-color-picker'), false, true );
-	
-	}
-	add_action( 'admin_enqueue_scripts', 'wowpress_color_picker_scripts');
-
-add_action( 'category_add_form_fields', 'wowpress_add_category_meta', 10, 2 );
-
-function wowpress_add_category_meta($taxonomy) {
-    $colors = $GLOBALS['wowpress']['theme']['settings']['color']['palette'];
-    ?><div class="form-field term-group">
-        <label for="color"><?php _e('Farbe', 'wowpress'); ?></label>	
-        <input type="text" name="color" id="color" class="color-picker">
-    </div><?php
+function wowpress_color_picker_scripts()
+{
+	wp_enqueue_style('wp-color-picker');
+	wp_enqueue_script('cp-active', get_template_directory_uri() . "/plugins/cp-active.js", array('wp-color-picker'), false, true);
 }
+add_action('admin_enqueue_scripts', 'wowpress_color_picker_scripts');
 
-add_action( 'created_category', 'wowpress_save_category_meta', 10, 2 );
-
-function wowpress_save_category_meta( $term_id, $tt_id ){
-    if( isset( $_POST['color'] ) && '' !== $_POST['color'] ){
-        $color = sanitize_title( $_POST['color'] );
-        add_term_meta( $term_id, 'color', $color, true );
-    }
-}
-
-add_action( 'category_edit_form_fields', 'wowpress_edit_category_meta', 10, 2 );
-
-function wowpress_edit_category_meta( $term, $taxonomy ){
+add_action('category_add_form_fields', 'wowpress_add_category_meta', 10, 2);
 
+function wowpress_add_category_meta($taxonomy)
+{
 	$colors = $GLOBALS['wowpress']['theme']['settings']['color']['palette'];
+?><div class="form-field term-group">
+		<label for="color"><?php _e('Farbe', 'wowpress'); ?></label>
+		<input type="text" name="color" id="color" class="color-picker">
+	</div><?php
+		}
+
+		add_action('created_category', 'wowpress_save_category_meta', 10, 2);
+
+		function wowpress_save_category_meta($term_id, $tt_id)
+		{
+			if (isset($_POST['color']) && '' !== $_POST['color']) {
+				$color = sanitize_title($_POST['color']);
+				add_term_meta($term_id, 'color', $color, true);
+			}
+		}
+
+		add_action('category_edit_form_fields', 'wowpress_edit_category_meta', 10, 2);
+
+		function wowpress_edit_category_meta($term, $taxonomy)
+		{
+
+			$colors = $GLOBALS['wowpress']['theme']['settings']['color']['palette'];
 
 
-    // get current group
-    $selected_color = get_term_meta( $term->term_id, 'color', true );
+			// get current group
+			$selected_color = get_term_meta($term->term_id, 'color', true);
 
-    ?><tr class="form-field term-group-wrap">
-        <th scope="row"><label for="color"><?php _e( 'Farbe', 'wowpress' ); ?></label></th>
-        <td>
-        <input type="text" name="color" id="color" class="color-picker" value="#<?=$selected_color?>">
+			?><tr class="form-field term-group-wrap">
+		<th scope="row"><label for="color"><?php _e('Farbe', 'wowpress'); ?></label></th>
+		<td>
+			<input type="text" name="color" id="color" class="color-picker" value="#<?= $selected_color ?>">
 		</td>
-    </tr><?php
-}
+	</tr><?php
+		}
 
-add_action( 'edited_category', 'wowpress_update_category_meta', 10, 2 );
+		add_action('edited_category', 'wowpress_update_category_meta', 10, 2);
 
-function wowpress_update_category_meta( $term_id, $tt_id ){
+		function wowpress_update_category_meta($term_id, $tt_id)
+		{
 
-    if( isset( $_POST['color'] ) && '' !== $_POST['color'] ){
-        $color = sanitize_title( $_POST['color'] );
-        update_term_meta( $term_id, 'color', $color );
-    }
-}
+			if (isset($_POST['color']) && '' !== $_POST['color']) {
+				$color = sanitize_title($_POST['color']);
+				update_term_meta($term_id, 'color', $color);
+			}
+		}
 
-//* Theme Options Page **/
-require_once ( get_stylesheet_directory() . '/options/api.php' );
+		//* Theme Options Page **/
+		require_once(get_stylesheet_directory() . '/options/api.php');
 
-/** Global Helper functions */
-function translate_string($string,$lang="deu"){
-	$dict_path = get_template_directory()."/lang/$lang.json";
-	if(!file_exists($dict_path)) return $string;
-	$dict = json_decode(file_get_contents($dict_path),true);
-	if(key_exists($string,$dict)){
-		return $dict[$string];
-	}
-	return $string;
-}
+		/** Global Helper functions */
+		function translate_string($string, $lang = "deu")
+		{
+			$dict_path = get_template_directory() . "/lang/$lang.json";
+			if (!file_exists($dict_path)) return $string;
+			$dict = json_decode(file_get_contents($dict_path), true);
+			if (key_exists($string, $dict)) {
+				return $dict[$string];
+			}
+			return $string;
+		}
 
-function format_date($timestamp="NOW",$format="dd.MM.yyyy"){
-	return datefmt_format(\IntlDateFormatter::create(
-		'de_DE.UTF-8',
-		\IntlDateFormatter::NONE,
-		\IntlDateFormatter::NONE,
-		\date_default_timezone_get(),
-		\IntlDateFormatter::GREGORIAN,
-		$format,
-	  ),is_numeric($timestamp)?$timestamp:strtotime($timestamp));
-}
+		function format_date($timestamp = "NOW", $format = "dd.MM.yyyy")
+		{
+			return datefmt_format(\IntlDateFormatter::create(
+				'de_DE.UTF-8',
+				\IntlDateFormatter::NONE,
+				\IntlDateFormatter::NONE,
+				\date_default_timezone_get(),
+				\IntlDateFormatter::GREGORIAN,
+				$format,
+			), is_numeric($timestamp) ? $timestamp : strtotime($timestamp));
+		}
 
+		function dd(...$vars)
+		{
+			echo "<pre>";
+			var_dump($vars);
+			echo "</pre>";
+			exit;
+		}
 
-/** Roles */
-set_roles();
\ No newline at end of file
+		function set_sidebar_status($location, bool $active = true)
+		{
+			switch ($location) {
+				case 'top':
+					$GLOBALS['wowpress']['sidebar']['top'] = $active;
+					break;
+				case 'left':
+					$GLOBALS['wowpress']['sidebar']['left'] = $active;
+					break;
+				case 'right':
+					$GLOBALS['wowpress']['sidebar']['right'] = $active;
+					break;
+				case 'bottom':
+					$GLOBALS['wowpress']['sidebar']['bottom'] = $active;
+					break;
+			}
+		}
+		function get_sidebar_status($location)
+		{
+			switch ($location) {
+				case 'top':
+					return $GLOBALS['wowpress']['sidebar']['top'];
+					break;
+				case 'left':
+					return $GLOBALS['wowpress']['sidebar']['left'];
+					break;
+				case 'right':
+					return $GLOBALS['wowpress']['sidebar']['right'];
+					break;
+				case 'bottom':
+					return $GLOBALS['wowpress']['sidebar']['bottom'];
+					break;
+			}
+			return false;
+		}
+
+		/** Roles */
+		set_roles();
diff --git a/theme/header.php b/theme/header.php
index b31bec6..9246b99 100644
--- a/theme/header.php
+++ b/theme/header.php
@@ -32,31 +32,14 @@
 	<?php get_template_part('template-parts/layout/header', 'content'); ?>
 
 	<div class="content-wrapper">
-		<?php
-		if ($GLOBALS['wowpress']['widget_area']['top'] !== false) :
-		?>
+		<?php if (is_active_sidebar('top-widgets') && get_sidebar_status('top') )  : ?>
 			<div class="widget-wrapper top-widgets">
-				<div id="demo-widget" class="widget">
-					<h3>Titel Top 1</h3>
-				</div>
+				<?php dynamic_sidebar('top-widgets'); ?>
 			</div>
-		<?php
-		else :
-		?>
-			<div class="top-title">
-				<?= $GLOBALS['wowpress']['page_title'] ?>
-			</div>
-		<?php
-		endif;
-		if ($GLOBALS['wowpress']['widget_area']['left'] !== false) :
-		?>
-			<?php if (is_active_sidebar('left-widgets')) : ?>
+		<?php endif; ?>
+		<?php if (is_active_sidebar('left-widgets') && get_sidebar_status('left')) : ?>
 			<div class="widget-wrapper left-widgets">
-					<?php dynamic_sidebar('left-widgets'); ?>
+				<?php dynamic_sidebar('left-widgets'); ?>
 			</div>
-			<?php endif; ?>
-		<?php
-		endif;
-		?>
-
+		<?php endif; ?>
 		<div id="content" class="content">
\ No newline at end of file
diff --git a/theme/inc/config-routing.php b/theme/inc/config-routing.php
index 0bef214..cff85ea 100644
--- a/theme/inc/config-routing.php
+++ b/theme/inc/config-routing.php
@@ -1,9 +1,13 @@
 <?php
 
+use WoWPress\Models\Raid;
+
 add_filter('generate_rewrite_rules', function ($wp_rewrite) {
     $wp_rewrite->rules = array_merge(
         ['roster/?$' => 'index.php?wowpress_page=roster'],
+        ['raids/?$' => 'index.php?wowpress_page=raids&year='.date('Y')."&month=".date('m')],
         ['raids/(\d+)/(\d+)?$' => 'index.php?wowpress_page=raids&year=$matches[1]&month=$matches[2]'],
+        ['raid/(\d+)/?$' => 'index.php?wowpress_page=raid&raid_id=$matches[1]'],
         ['request/?$' => 'index.php?wowpress_page=form_request'],
         $wp_rewrite->rules
     );
@@ -13,6 +17,7 @@ add_filter('query_vars', function ($query_vars) {
     $query_vars[] = 'wowpress_page';
     $query_vars[] = 'year';
     $query_vars[] = 'month';
+    $query_vars[] = 'raid_id';
 
     return $query_vars;
 });
@@ -45,6 +50,21 @@ add_action('template_redirect', function () {
             include plugin_dir_path(__FILE__) . '../pages/raids.php';
             die;
             break;
+        case 'raid':
+            $GLOBALS['wowpress']['widget_area'] = [
+                'left' => true,
+                'right' => true,
+                'top' => false,
+                'bottom' => true,
+            ];
+
+            $raid = Raid::find(get_query_var('raid_id'));
+            $GLOBALS['wowpress']['raid'] = $raid;
+            $GLOBALS['wowpress']['page_title'] = $raid->title;
+
+            include plugin_dir_path(__FILE__) . '../pages/single_raid.php';
+            die;
+            break;
         case 'form_request':
             include plugin_dir_path(__FILE__) . '../request.php';
             die;
diff --git a/theme/index.php b/theme/index.php
index 58c032b..416c239 100644
--- a/theme/index.php
+++ b/theme/index.php
@@ -11,10 +11,11 @@
  *
  * @package WowPress
  */
+
 get_header();
 ?>
 
-	<section id="primary">
+	<section id="primary" <?php if(!get_sidebar_status('top')):?> style="margin-top:calc(-1 * var(--wowp-gap))" <?php endif; ?>>
 		<main id="main">
 
 		<?php
diff --git a/theme/lang/deu.json b/theme/lang/deu.json
index f85f6e4..384bcc9 100644
--- a/theme/lang/deu.json
+++ b/theme/lang/deu.json
@@ -2,5 +2,8 @@
     "Warlock" : "Hexenmeister",
     "Destruction": "Zerstörung",
     "Evoker" : "Rufer",
-    "Devastation" : "Verheerung"
+    "Devastation" : "Verheerung",
+    "Retribution": "Vergeltung",
+    "Monk" : "Mönch",
+    "Windwalker" : "Windläufer"
 }
\ No newline at end of file
diff --git a/theme/pages/raids.php b/theme/pages/raids.php
index 729da33..b2ca256 100644
--- a/theme/pages/raids.php
+++ b/theme/pages/raids.php
@@ -6,38 +6,51 @@ global $widget_area;
 
 global $year;
 global $month;
+set_sidebar_status('top', false);
 
-$raids = Raid::whereStart("$year-$month-01",">")->whereEnd("$year-$month-31","<")->get();
 
-var_dump($raids);
+$raids = Raid::where("start", ">", "$year-$month-01 00:00:00")->get();
 
 get_header();
 ?>
+<div class="top-title flex flex-row gap-2" style="margin-top:calc(-1 * var(--wowp-gap))">
+<div class="text-3xl font-bold bg-glass shadow p-3 text-center w-full">
+    <?= $GLOBALS['wowpress']['page_title'] ?>
+</div>
+</div>
 
 <section id="primary">
     <main id="main">
         <div class="bg-glass shadow p-auto">
-            <div class="text-xl font-bold bg-glass text-white text-center"><?=format_date("$year-$month-1",'MMMM')?></div>
+            <div class="text-xl font-bold bg-glass text-white text-center"><?= format_date("$year-$month-1", 'MMMM') ?></div>
             <div class="grid grid-cols-7 gap-1 pt-1" style="grid-auto-rows: 1fr">
-                <?php 
-                for($i=1;$i<=date("t",strtotime("$year-$month-01"));$i++){
-                    ?>
-                    <div class="bg-glass p-auto text-center <?php if($i== 24 || $i == 12){ ?> glow shadow-hunter <?php } ?> grid grid-cols-2 grid-rows-2">
-                    <div class="text-left"><?=date('d',strtotime("$year-$month-$i"))?></div>
-                    <div class="text-right"><?=format_date("$year-$month-$i",'E')?></div>
-
                 <?php
-                if($i == 24 || $i == 12){
-                    ?>
-                    <div style="grid-area: 2 / 1 / 3 / 3;">
-                        <div>Raid XY</div>
-                        <div class="text-sm text-slate-500">(Heroisch)</div>
-                    </div>
-                    <?php
-                }
+                for ($i = 1; $i <= date("t", strtotime("$year-$month-01")); $i++) {
+                    $has_raid = [];
+                    foreach ($raids as $raid) {
+                        if (format_date($raid->start) == format_date("$year-$month-$i")) {
+                            $has_raid[] = $raid;
+                        }
+                    }
                 ?>
-                </div>
-                    <?php
+                    <div class="bg-glass p-auto text-center <?php if (count($has_raid) > 0) { ?> glow shadow-<?=$has_raid[0]->color?> <?php } ?> grid grid-cols-2 grid-rows-2">
+                        <div class="text-left"><?= date('d', strtotime("$year-$month-$i")) ?></div>
+                        <div class="text-right"><?= format_date("$year-$month-$i", 'E') ?></div>
+
+                        <?php
+                        foreach($has_raid as $raid){
+                        ?>
+
+                                <a href="<?=$raid->link?>" class="group" style="grid-area: 2 / 1 / 3 / 3;">
+                                    <div class="group-hover:text-<?=$raid->color?> bg-<?=$raid->color?>-200"><?=$raid->title?></div>
+                                    <?php if($raid->difficulty): ?><div class="text-sm text-slate-500">(<?=$raid->difficulty?>)</div><?php endif; ?>
+                                </a>
+                        <?php
+                            
+                        }
+                        ?>
+                    </div>
+                <?php
                 }
                 ?>
             </div>
@@ -46,4 +59,4 @@ get_header();
 </section>
 
 <?php
-get_footer();
\ No newline at end of file
+get_footer();
diff --git a/theme/pages/roster.php b/theme/pages/roster.php
index c4b7d4f..bf02e06 100644
--- a/theme/pages/roster.php
+++ b/theme/pages/roster.php
@@ -7,11 +7,18 @@ use WoWPress\Frontend\Icon;
 use WoWPress\Models\Character;
 
 global $widget_area;
+set_sidebar_status('top', false);
 
 $characters = Character::orderBy('rank')->get();
 get_header();
 
 ?>
+<div class="top-title flex flex-row gap-2" style="margin-top:calc(-1 * var(--wowp-gap))">
+<div class="text-3xl font-bold bg-glass shadow p-3 text-center w-full">
+    <?= $GLOBALS['wowpress']['page_title'] ?>
+</div>
+</div>
+
 <section id="primary">
     <main id="main">
         <div class="bg-glass shadow p-auto">
@@ -19,23 +26,23 @@ get_header();
                 <thead class="bg-glass">
                     <tr>
                         <td class="p-auto">Name</td>
-                        <td class="p-auto">Klasse</td>
-                        <td class="p-auto">Rang</td>
-                        <td class="p-auto">Server</td>
-                        <td class="p-auto">Gilde</td>
+                        <td class="p-auto hidden lg:table-cell">Klasse</td>
+                        <td class="p-auto hidden lg:table-cell">Rang</td>
+                        <td class="p-auto hidden lg:table-cell">Server</td>
+                        <td class="p-auto hidden lg:table-cell">Gilde</td>
                         <td class="p-auto">Aktionen</td>
                     </tr>
                 </thead>
                 <tbody class="bg-slate-900">
                     <?php foreach ($characters as $char) : ?>
-                        <tr class="text-<?= $char->color ?>">
+                        <tr class="text-<?= $char->color ?> even:bg-slate-800">
                             <td class="p-auto">
                                 <div class="flex flex-row gap-2 items-center">
                                     <img class="w-[42px] aspect-1 rounded-full" src="<?= $char->avatar ?>" alt="">
                                     <span><?= $char->name ?></span>
                                 </div>
                             </td>
-                            <td class="p-auto">
+                            <td class="p-auto hidden lg:table-cell">
                                 <div class="flex flex-row gap-2 items-center">
                                     <img class="w-[30px] aspect-1 rounded-full" src="<?= $char->class_icon ?>" alt="">
                                     <img class="w-[30px] aspect-1 rounded-full" src="<?= $char->spec_icon ?>" alt="">
@@ -43,9 +50,9 @@ get_header();
                                         <?= translate_string($char->spec) ?></span>
                                 </div>
                             </td>
-                            <td class="p-auto"><?= $char->rank ?></td>
-                            <td class="p-auto"><?= $char->realm ?></td>
-                            <td class="p-auto"><?= $char->guild ?></td>
+                            <td class="p-auto hidden lg:table-cell"><?= $char->rank ?></td>
+                            <td class="p-auto hidden lg:table-cell"><?= $char->realm ?></td>
+                            <td class="p-auto hidden lg:table-cell"><?= $char->guild ?></td>
 
                             <td class="p-auto">
                                 <div class="flex flex-row justify-end gap-2">
diff --git a/theme/pages/single_raid.php b/theme/pages/single_raid.php
new file mode 100644
index 0000000..a7edb12
--- /dev/null
+++ b/theme/pages/single_raid.php
@@ -0,0 +1,184 @@
+<?php
+
+use WoWPress\Frontend\Icon;
+use WoWPress\Frontend\ToggleButton;
+use WoWPress\Models\Raid;
+
+
+
+$raid = $GLOBALS['wowpress']['raid'];
+set_sidebar_status('top', false);
+set_sidebar_status('left', false);
+set_sidebar_status('right', false);
+
+get_header();
+?>
+<div class="top-title flex flex-col lg:flex-row gap-auto" style="margin-top:calc(-1 * var(--wowp-gap))">
+    <?php if ($raid->previous) : ?>
+        <a href="<?= $raid->previous->link ?>" class="btn btn-outline hidden lg:flex">Vorheriger</a>
+    <?php endif; ?>
+    <div class="text-3xl font-bold bg-glass shadow p-3 text-center w-full">
+        <?= $GLOBALS['wowpress']['page_title'] ?>
+    </div>
+    <?php if ($raid->next) : ?>
+        <a href="<?= $raid->next->link ?>" class="btn btn-outline hidden lg:flex">Nächster</a>
+    <?php endif; ?>
+</div>
+<section id="primary">
+    <main id="main">
+        <div class="flex flex-col lg:flex-row gap-auto">
+            <div class="bg-glass shadow p-auto w-full lg:w-1/5 order-2 lg:order-1">
+                <div class="grid text-center gap-1">
+                    <div class="bg-<?= $raid->color ?> text-black text-2xl "><?= format_date($raid->start, "EEEE") ?></div>
+                    <div class="border border-<?= $raid->color ?>">
+                        <div class="text-3xl p-auto "><?= format_date($raid->start, "dd. MMMM") ?></div>
+                    </div>
+                    <div class="border border-<?= $raid->color ?> p-2">Start: <?= format_date($raid->start, "HH:mm") ?></div>
+                    <div class="border border-<?= $raid->color ?> p-2">Ende: <?= format_date($raid->end, "HH:mm") ?></div>
+                    <?php if ($raid->difficulty) : ?>
+                        <div class="border border-<?= $raid->color ?> p-2"><?= $raid->difficulty ?></div>
+                    <?php endif; ?>
+                </div>
+            </div>
+            <div class="w-full flex flex-col gap-auto order-3 lg:order-2">
+                <div class="bg-glass shadow p-auto">
+                    <h3 class="text-xl font-bold">Informationen:</h3>
+                </div>
+                <div class="flex flex-col lg:flex-row gap-auto">
+                    <div class="bg-glass shadow p-auto flex flex-col gap-auto">
+                        <h3 class="text-xl font-bold text-center">Bosse</h3>
+                        <div class="grid gap-auto">
+                            <button class="btn btn-outline btn-alliance">Alle</button>
+                            <button class="btn btn-outline btn-priest">Fahrs'tuhl der Raidzerstörer</button>
+                            <button class="btn btn-outline btn-priest">Hogger</button>
+                            <button class="btn btn-outline btn-priest">Sylvanas linker Zeh</button>
+                            <button class="btn btn-outline btn-priest">RC Loot Council (Endboss)</button>
+
+                        </div>
+                    </div>
+                    <div class="w-full grid grid-cols-1 lg:grid-cols-4 gap-auto">
+                        <div class="bg-glass shadow p-auto flex flex-col gap-auto">
+                            <h3 class="text-xl font-bold text-center">Tank</h3>
+                            <button class="btn btn-outline btn-deathknight">Zauron</button>
+                            <button class="btn btn-outline btn-paladin">Moodyblues</button>
+
+                        </div>
+                        <div class="bg-glass shadow p-auto flex flex-col gap-auto">
+                            <h3 class="text-xl font-bold text-center">Heal</h3>
+                            <button class="btn btn-outline btn-monk">Pandacetamol</button>
+                            
+                        </div>
+                        <div class="bg-glass shadow p-auto flex flex-col gap-auto">
+                            <h3 class="text-xl font-bold text-center">Range</h3>
+                            <button class="btn btn-outline btn-hunter">Bleihagel</button>
+
+                        </div>
+                        <div class="bg-glass shadow p-auto flex flex-col gap-auto">
+                            <h3 class="text-xl font-bold text-center">Melee</h3>
+                            <button class="btn btn-outline btn-shaman">Yorndar</button>
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="flex flex-col gap-auto w-full lg:w-1/5 order-1 lg:order-3">
+                <div class="bg-glass shadow p-auto flex flex-col gap-auto">
+                    <h3 class="text-xl font-bold text-center">Status</h3>
+                    <div class="text-center text-monk flex flex-row gap-auto justify-center p-auto border border-monk">
+                        <?= Icon::get('c-check') ?>
+                        <span>Angemeldet</span>
+                    </div>
+                </div>
+
+                <div class="bg-glass shadow p-auto flex flex-col gap-auto">
+                    <h3 class="text-xl font-bold text-center">Status ändern</h3>
+                    <div class="grid grid-cols-2 gap-auto">
+                        <div class="col-span-2 text-center">Anwesenheit</div>
+                        <?= (new ToggleButton([
+                            'type' => 'radio',
+                            'name' => 'raid_status',
+                            'text' => 'Anwesend',
+                            'color' => 'monk',
+                            'icon_yes' => 'o-check-circle',
+                            'row' => false,
+                        ]))->render() ?>
+                        <?= (new ToggleButton([
+                            'type' => 'radio',
+                            'name' => 'raid_status',
+                            'text' => 'Abwesend',
+                            'color' => 'deathknight',
+                            'icon_yes' => 'o-x-circle',
+                            'row' => false,
+                        ]))->render() ?>
+                        <?= (new ToggleButton([
+                            'type' => 'radio',
+                            'name' => 'raid_status',
+                            'text' => 'Ersatzbank',
+                            'color' => 'druid',
+                            'icon_yes' => 'o-question-mark-circle',
+                            'row' => false,
+                        ]))->render() ?>
+                        <?= (new ToggleButton([
+                            'type' => 'radio',
+                            'name' => 'raid_status',
+                            'text' => 'Verspätet',
+                            'color' => 'demonhunter',
+                            'icon_yes' => 'o-clock',
+                            'row' => false,
+                        ]))->render() ?>
+                        <div class="col-span-2 text-center">Rolle</div>
+                        <?= (new ToggleButton([
+                            'type' => 'radio',
+                            'name' => 'raid_role',
+                            'text' => 'Tank',
+                            'color' => 'priest',
+                            'icon_yes' => 'o-shield-exclamation',
+                            'row' => false,
+                        ]))->render() ?>
+                        <?= (new ToggleButton([
+                            'type' => 'radio',
+                            'name' => 'raid_role',
+                            'text' => 'Heal',
+                            'color' => 'priest',
+                            'icon_yes' => 'o-heart',
+                            'row' => false,
+                        ]))->render() ?>
+                        <?= (new ToggleButton([
+                            'type' => 'radio',
+                            'name' => 'raid_role',
+                            'text' => 'Ranged',
+                            'color' => 'priest',
+                            'icon_yes' => 'o-bolt',
+                            'row' => false,
+                        ]))->render() ?>
+                        <?= (new ToggleButton([
+                            'type' => 'radio',
+                            'name' => 'raid_role',
+                            'text' => 'Melee',
+                            'color' => 'priest',
+                            'icon_yes' => 'o-hand-raised',
+                            'row' => false, 
+                        ]))->render() ?>
+                    </div>
+                    <button class="btn btn-outline btn-monk">
+                        <?=Icon::get('o-paper-airplane')?>
+                        <span>Status Speichern</span>
+                    </button>
+                </div>
+            </div>
+        </div>
+        <div class="w-full order-4 bg-glass shadow p-auto flex flex-col gap-auto">
+            <h3 class="text-xl font-bold text-center">Keine Rückmeldung</h3>
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-auto">
+                <button class="btn btn-outline btn-evoker">Yorndragon</button>
+                <button class="btn btn-outline btn-mage">Aye</button>
+                <button class="btn btn-outline btn-warrior">Stormranger</button>
+                <button class="btn btn-outline btn-druid">Kaldori</button>
+                <button class="btn btn-outline btn-shaman">Nokin</button>
+
+            </div>
+            </div>
+    </main>
+</section>
+<?php
+get_footer();
diff --git a/theme/theme.json b/theme/theme.json
index f592a81..83522ed 100644
--- a/theme/theme.json
+++ b/theme/theme.json
@@ -93,6 +93,11 @@
 					"slug": "warrior",
 					"color": "#C69B6D",
 					"name": "Warrior"
+				},
+				{
+					"slug": "alliance",
+					"color": "#f7941e",
+					"name": "Allianz"
 				}
 			]
 		},
diff --git a/theme/wowpress/Api/BattleNet.php b/theme/wowpress/Api/BattleNet.php
index a6d05b8..a58fefb 100644
--- a/theme/wowpress/Api/BattleNet.php
+++ b/theme/wowpress/Api/BattleNet.php
@@ -61,8 +61,12 @@ class BattleNet extends Api{
             'access_token' => $this->bearer()
         ], false, $timeout);
 
-        var_dump($data);
-        exit;
+        if(!empty($data['code']) && $data['code'] == 403){
+       #    var_dump($data);
+       #    exit;
+       return false;
+        }
+
 
         return $data;
     }
diff --git a/theme/wowpress/Database/CreateCharacterTable.php b/theme/wowpress/Database/CreateCharacterTable.php
index b2c8264..cef5db6 100644
--- a/theme/wowpress/Database/CreateCharacterTable.php
+++ b/theme/wowpress/Database/CreateCharacterTable.php
@@ -2,7 +2,7 @@
 
 namespace WoWPress\Database;
 
-class CreateRaidTable extends CreateTable
+class CreateCharacterTable extends CreateTable
 {
     
     public static $table_name = "characters";
@@ -11,8 +11,10 @@ class CreateRaidTable extends CreateTable
         'realm' =>  'text NOT NULL',
         'class' =>  "text DEFAULT Adventurer",
         'spec'  =>  "text DEFAULT Brave",
+        'id_blizz' => 'mediumint(9)',
         'guild' =>  "text",
         'rank' =>   'tinyint DEFAULT 99',
+        'user_id' => 'mediumint(9)',
     ];
 
 }
diff --git a/theme/wowpress/Database/CreateRaidTable.php b/theme/wowpress/Database/CreateRaidTable.php
index 0e3234d..8730500 100644
--- a/theme/wowpress/Database/CreateRaidTable.php
+++ b/theme/wowpress/Database/CreateRaidTable.php
@@ -2,7 +2,7 @@
 
 namespace WoWPress\Database;
 
-class CreateCharacterTable extends CreateTable
+class CreateRaidTable extends CreateTable
 {
     
     public static $table_name = "raids";
diff --git a/theme/wowpress/Frontend/ToggleButton.php b/theme/wowpress/Frontend/ToggleButton.php
new file mode 100644
index 0000000..a76db7d
--- /dev/null
+++ b/theme/wowpress/Frontend/ToggleButton.php
@@ -0,0 +1,51 @@
+<?php
+
+namespace WoWPress\Frontend;
+
+class ToggleButton{
+
+    private $id;
+    public $row = true;
+    public $icons = true;
+    public $gray = true;
+    public $type = "checkbox";
+    public $name;
+    public $checked;
+    public $disabled;
+    public $text;
+    public $icon_yes = "o-check-badge";
+    public $icon_no = "o-no-symbol";
+
+    public $color_yes = "monk";
+    public $color_no = "monk";
+
+    public function __construct($args)
+    {
+    
+        foreach($args as $key => $value){
+            if(property_exists(self::class,$key)){
+                $this->$key = $value;
+            }
+
+            if(!empty($args['color'])){
+                $this->color_yes = $args['color'];
+                $this->color_no = $args['color'];
+
+            }
+
+            if(empty($this->id)){
+                $this->id = uniqid();
+            }
+            if(empty($this->name)){
+                $this->name = uniqid();
+            }
+        }
+
+    }
+
+
+    public function render(){
+        require(get_template_directory()."/components/toggle-button.php");
+    }
+
+}
\ No newline at end of file
diff --git a/theme/wowpress/Models/Character.php b/theme/wowpress/Models/Character.php
index 3bd3c0c..6b0707d 100644
--- a/theme/wowpress/Models/Character.php
+++ b/theme/wowpress/Models/Character.php
@@ -29,9 +29,12 @@ class Character extends Model
         $this->api = new BattleNet($id,$key);
     }
 
-    protected function sanitize($string)
+    protected function sanitize($string,$delimiter_space="")
     {
-        return strtolower(str_replace(" ", "", $string));
+        $string = strtolower(str_replace(" ", $delimiter_space, $string));
+        $string = strtolower(str_replace("'", "", $string));
+
+        return $string;
     }
 
     public function getRankAttribute($rank){
@@ -69,38 +72,36 @@ class Character extends Model
 
     public function updateFromAPI()
     {
-        $char_from_api = $this->api->getCharacter($this->name,$this->realm);
+        $realm = $this->sanitize($this->realm,"-");
+        $char_from_api = $this->api->getCharacter($this->name,$realm);
         if(!array_key_exists('character_class',$char_from_api)){
             return false;
         }
         $this->class = $char_from_api['character_class']['name'];
         $this->spec = $char_from_api['active_spec']['name'];
-
-        $guild_data = $this->api->getGuildRank($this->name,$this->realm);
+        $this->id_blizz = $char_from_api['id'];
+        $guild_data = $this->api->getGuildRank($this->name,$realm);
         $this->guild = $guild_data['guild'];
         $this->rank = $guild_data['rank'];
-
+        
         $this->save();
         return $char_from_api;
     }
 
     public function updateMedia($force = false){
+        if(empty($this->id_blizz)){
+            return false;
+        }
         $character_dir = wp_upload_dir()['basedir']."/characters/".$this->ID."/";
         if(!is_dir($character_dir)){
             mkdir($character_dir,0777,true);
         }
 
-        $char_from_api = $this->api->getMedia($this->name,$this->realm,$force?-1:360);
-        if(empty($char_from_api['assets'])){
-            return $char_from_api;
-        }
-        foreach($char_from_api['assets'] as $asset){
-            switch($asset['key']){
-                case 'avatar':
-                    file_put_contents($character_dir."avatar.jpg",file_get_contents($asset['value']));
-                    break;
-            }
-        }
+        $id = $this->id_blizz;
+        $mod = $id % 256;
+        $realm = $this->sanitize($this->realm,'-');
+        $img_url = "https://render.worldofwarcraft.com/eu/character/$realm/$mod/$id-avatar.jpg";
+        file_put_contents($character_dir."avatar.jpg",file_get_contents($img_url));
     }
 
     public function getAvatarAttribute(){
diff --git a/theme/wowpress/Models/Raid.php b/theme/wowpress/Models/Raid.php
index c17605d..2bbd44c 100644
--- a/theme/wowpress/Models/Raid.php
+++ b/theme/wowpress/Models/Raid.php
@@ -13,6 +13,8 @@ class Raid extends Model
     protected $primaryKey = 'ID';
     protected $guarded = ['ID'];
 
+    private $api;
+
     public function __construct($attrs = [])
     {
         parent::__construct($attrs);
@@ -27,4 +29,42 @@ class Raid extends Model
     }
 
 
+    public function getColorAttribute($type=""){
+        switch($this->difficulty){
+            case 'Normal': return "shaman";
+            case 'Heroic': return "warlock";
+            case 'Mythic': return "deathknight";
+            case 'Teamspeak': return "hunter";
+            default: return "priest";
+        }
+    }
+
+    public function getLinkAttribute(){
+        return "/raid/".$this->ID;
+    }
+
+
+    public function getPreviousAttribute(){
+        $id = $this->ID;
+        while($id){
+            $raid = Raid::find(--$id);
+            if(!empty($raid->ID)){
+                return $raid;
+            }
+        }
+        return false;
+    }
+
+
+    public function getNextAttribute(){
+        $id = $this->ID;
+        while($id <= Raid::max('ID')){
+            $raid = Raid::find(++$id);
+            if(!empty($raid->ID)){
+                return $raid;
+            }
+        }
+        return false;
+    }
+
 }
\ No newline at end of file