<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta content='text/html; charset=utf-8' http-equiv='content-type'/>
        <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1'/>
        <title><?=$page->title?></title>
        <link rel='shortcut icon' href='<?=$page->favicon?>'/>
        <!-- CSS files -->
        <link rel='stylesheet' type='text/css' href='<?=$path["css"]?>ui.css'/>
        <link rel='stylesheet' type='text/css' href='<?=$path["css"]?>fusion.css'/>
        <link rel='stylesheet' type='text/css' href='<?=$path["css"]?>filters.css'/>
        <!-- Script files -->
        <script src="<?=$path["js"]?>ui.js"></script>
        <!-- Meta tags -->
        <link rel='canonical' href='<?=$page->canonical?>'/>
        <link rel='author' href='<?=$page->author?>'/>
        <link rel='publisher' href='<?=$page->author?>'/>
        <meta name='description' content='<?=$page->description?>'/>
        <meta property='og:title' content='<?=$page->title?>'/>
        <meta property='og:url' content='<?=$page->canonical?>'/>
        <meta property='og:description' content='<?=$page->description?>'/>
        <meta property='og:image' content='<?=$page->icon?>'/>
        <meta property='og:site_name' content='<?=$page->name?>'/>
        <meta property='og:type' content='website'/>
        <meta property='og:locale' content='en'/>
        <meta name='twitter:card' content='summary'/>
        <meta name='twitter:title' content='<?=$page->title?>'/>
        <meta name='twitter:description' content='<?=$page->description?>'/>
        <meta name='twitter:image' content='<?=$page->icon?>'/>
        <meta name='twitter:url' content='<?=$page->canonical?>'/>
        <meta name='robots' content='index follow'/>
    </head>
    <body>
<?php
        include __DIR__ . "/inc/header.php";
?>
        <section class='filters'>
            <h2>
                Fusion filter
            </h2>
            <form action='/fusion/' method='get' id='filter_fusion' class='filter'>
                <table>
                    <tr>
                        <td class='filter'>
                            <span>Target:</span>
                            <select name='product' id='filter_product'>
                                <option value=''>All</option>
<?php
                                foreach ($page->products as $product){
                                    if ($product->id == $page->filters["product"]){
                                        $selected = "selected";
                                    }
                                    else{
                                        $selected = "";
                                    }
?>
                                     <option value='<?=$product->id?>' <?=$selected?>><?=$product->element_name?> <?=$product->name?></option>
<?php
                                }
?>
                            </select>
                        </td>
                    </tr>
                </table>
                <div id='filter_apply'>
                    <input type='submit' value='Apply'/>
                </div>
            </form>
        </section><!-- #filters -->
<?php
        foreach ($page->fusion as $fusion){
?>
            <section class='content'>
                <h2>
                    <?=$fusion->product->title?>
                </h2>
                <article>
                    <div class='f5'>
                        <div class='product'>
                            <a target='_blank' title='<?=$fusion->product->name?>' href='/<?=$UID?>/catalog/<?=$fusion->product->id?>'>
                                <div class='monster_panel'>
                                    <span class='stars'>
                                        <img class='star star_gold' src='<?=$path["img"]["icon"]?>star.png'/>
                                        <img class='star star_gold' src='<?=$path["img"]["icon"]?>star.png'/>
                                        <img class='star star_gold' src='<?=$path["img"]["icon"]?>star.png'/>
                                        <img class='star star_gold' src='<?=$path["img"]["icon"]?>star.png'/>
                                        <img class='star star_gold' src='<?=$path["img"]["icon"]?>star.png'/>
                                    </span>
                                    <img title='<?=$fusion->product->name?>' class='monster border_<?=$fusion->product->element_name?>' src='<?=$fusion->product->get_image()?>'/>
                                    <span class='level'>
                                        1
                                    </span>
                                </div><!-- .monster_panel -->
                            </a>
                            <div class='owned'>
                                <span class='owned'>
                                    Collection:
                                </span>
<?php
                                foreach ($fusion->product->owned as $owned){
                                    if ($owned->unit->awakens_from == "" && $owned->unit->awakens_to == ""){
                                        // No to, no from, silver monster.
                                        $star_class ="star_silver";
                                        $mon_title = $owned->unit->element_name . " " . $owned->unit->name;
                                    }
                                    elseif ($owned->unit->awakens_from != "" && $owned->unit->awakens_to == ""){
                                        // Already awakened
                                        if ($owned->unit->base_stars - $owned->unit->natural_stars == 1){
                                            // Normal awaken.
                                            $star_class ="star_purple";
                                        }
                                        else{
                                            // Second awaken.
                                            $star_class ="star_red";
                                        }
                                        $mon_title = $owned->unit->name;
                                    }
                                    elseif ($owned->unit->awakens_to != ""){
                                        // Awakeable.
                                        $star_class ="star_gold";
                                        $mon_title = $owned->unit->element_name . " " . $owned->unit->name;
                                    }
                                    $mon_title = $mon_title . " - " . $owned->stars . "* - Lv." . $owned->level;
?>
                                    <a target="_blank" title='<?=$mon_title?>' href='/<?=$UID?>/monsters/<?=$owned->id?>'>
                                        <div class='monster_panel'>
                                            <span class='stars'>
<?php
                                                for ($i = 0; $i < $owned->stars; $i ++){
?>
                                                    <img class='star <?=$star_class?>' src='<?=$path["img"]["icon"]?>star.png'/>
<?php
                                                }
?>
                                            </span>
                                            <img title='<?=$mon_title?>' class='monster border_<?=$owned->unit->element_name?>' src='<?=$owned->unit->get_image()?>'/>
                                            <span class='level'>
                                                <?=$owned->level?>
                                            </span>
                                        </div>
                                    </a>
<?php
                                }// foreach ($fusion->product->owned as $owned)
?>
                            </div><!-- .owned -->
                        </div><!-- .product --><div class='ingredients'><!-- No newline because CSS reads it as a whitespace -->
<?php
                            foreach ($fusion->fusion as $sub_fusion){
?>
                                <div class='f4'>
                                    <div class='product'>
                                        <a target='_blank' title='<?=$sub_fusion->product_awaken->name?>' href='/<?=$UID?>/catalog/<?=$sub_fusion->product_awaken->id?>'>
                                            <div class='awakened monster_panel'>
                                                <span class='stars'>
                                                    <img class='star star_purple' src='<?=$path["img"]["icon"]?>star.png'/>
                                                    <img class='star star_purple' src='<?=$path["img"]["icon"]?>star.png'/>
                                                    <img class='star star_purple' src='<?=$path["img"]["icon"]?>star.png'/>
                                                    <img class='star star_purple' src='<?=$path["img"]["icon"]?>star.png'/>
                                                    <img class='star star_purple' src='<?=$path["img"]["icon"]?>star.png'/>
                                                </span>
                                                <img title='<?=$sub_fusion->product_awaken->name?>' class='monster border_<?=$sub_fusion->product_awaken->element_name?>' src='<?=$sub_fusion->product_awaken->get_image()?>'/>
                                                <span class='level'>
                                                    35
                                                </span>
                                            </div><!-- .awakened .monster_panel -->
                                        </a>
                                        <a target='_blank' title='<?=$sub_fusion->product->name?>' href='/<?=$UID?>/catalog/<?=$sub_fusion->product->id?>'>
                                            <div class='unawakened monster_panel'>
                                                <span class='stars'>
<?php
                                                    for ($i = 0; $i < $sub_fusion->product->base_stars; $i ++){
?>
                                                        <img class='star star_gold' src='<?=$path["img"]["icon"]?>star.png'/>
<?php
                                                    }
?>
                                                </span>
                                                <img title='<?=$sub_fusion->product->name?>' class='monster border_<?=$sub_fusion->product->element_name?>' src='<?=$sub_fusion->product->get_image()?>'/>
                                                <span class='level'>
                                                    1
                                                </span>
                                            </div><!-- .unawakened .monster_panel -->
                                        </a>
                                        <div class='essences'>
<?php
                                            foreach ($sub_fusion->product->essences as $essence){
?>
                                                <div class='essence border_<?=$essence["element"]?>'>
                                                    <img alt='<?=$essence["grade"]?> <?=$essence["element"]?> essence' title='<?=$essence["amount"]?>x <?=$essence["grade"]?> <?=$essence["element"]?> essence' class='essence' src='<?=$path["img"]["essence"]?><?=$essence["element"]?>_<?=$essence["grade"]?>.png'/>
                                                    <span>
                                                        <?=$essence["amount"]?>
                                                    </span>
                                                </div>
<?php
                                            }
?>
                                        </div><!-- .essences -->
                                        <div class='owned'>
                                            <span class='owned'>
                                                Collection:
                                            </span>
<?php
                                            foreach ($sub_fusion->product->owned as $owned){
                                                if ($owned->unit->awakens_from == "" && $owned->unit->awakens_to == ""){
                                                    // No to, no from, silver monster.
                                                    $star_class ="star_silver";
                                                    $mon_title = $owned->unit->element_name . " " . $owned->unit->name;
                                                }
                                                elseif ($owned->unit->awakens_from != "" && $owned->unit->awakens_to == ""){
                                                    // Already awakened
                                                    if ($owned->unit->base_stars - $owned->unit->natural_stars == 1){
                                                        // Normal awaken.
                                                        $star_class ="star_purple";
                                                    }
                                                    else{
                                                        // Second awaken.
                                                        $star_class ="star_red";
                                                    }
                                                    $mon_title = $owned->unit->name;
                                                }
                                                elseif ($owned->unit->awakens_to != ""){
                                                    // Awakeable.
                                                    $star_class ="star_gold";
                                                    $mon_title = $owned->unit->element_name . " " . $owned->unit->name;
                                                }
                                                $mon_title = $mon_title . " - " . $owned->stars . "* - Lv." . $owned->level;
?>
                                                <a target="_blank" title='<?=$mon_title?>' href='/<?=$UID?>/monsters/<?=$owned->id?>'>
                                                    <div class='monster_panel'>
                                                        <span class='stars'>
<?php
                                                            for ($i = 0; $i < $owned->stars; $i ++){
?>
                                                                <img class='star <?=$star_class?>' src='<?=$path["img"]["icon"]?>star.png'/>
<?php
                                                            }
?>
                                                        </span>
                                                        <img title='<?=$mon_title?>' class='monster border_<?=$owned->unit->element_name?>' src='<?=$owned->unit->get_image()?>'/>
                                                        <span class='level'>
                                                            <?=$owned->level?>
                                                        </span>
                                                    </div>
                                                </a>
<?php
                                            }
?>
                                        </div><!-- .owned -->
                                    </div><!-- .product --><div class='ingredients'><!-- No newline because CSS reads it as a whitespace -->
<?php
                                        $num = 0;
                                        foreach ($sub_fusion->ingredient as $sub_monster){
?>
                                            <div class='f3'>
                                                <div class='product'>
                                                    <a target='_blank' title='<?=$sub_monster->name?>' href='/<?=$UID?>/catalog/<?=$sub_monster->id?>'>
                                                        <div class='awakened monster_panel'>
                                                            <span class='stars'>
                                                                <img class='star star_purple' src='<?=$path["img"]["icon"]?>star.png'/>
                                                                <img class='star star_purple' src='<?=$path["img"]["icon"]?>star.png'/>
                                                                <img class='star star_purple' src='<?=$path["img"]["icon"]?>star.png'/>
                                                                <img class='star star_purple' src='<?=$path["img"]["icon"]?>star.png'/>
                                                            </span>
                                                            <img title='<?=$sub_monster->name?>' class='monster border_<?=$sub_monster->element_name?>' src='<?=$sub_monster->get_image()?>'/>
                                                            <span class='level'>
                                                                30
                                                            </span>
                                                        </div><!-- .awakened .monster_panel -->
                                                    </a>
                                                    <div class='essences'>
<?php
                                                        foreach ($sub_fusion->ingredient_unawaken[$num]->essences as $essence){
?>
                                                            <div class='essence border_<?=$essence["element"]?>'>
                                                                <img alt='<?=$essence["grade"]?> <?=$essence["element"]?> essence' title='<?=$essence["amount"]?>x <?=$essence["grade"]?> <?=$essence["element"]?> essence' class='essence' src='<?=$path["img"]["essence"]?><?=$essence["element"]?>_<?=$essence["grade"]?>.png'/>
                                                                <span>
                                                                    <?=$essence["amount"]?>
                                                                </span>
                                                            </div>
<?php
                                                        }
?>
                                                    </div><!-- .essences -->
                                                    <a target='_blank' title='<?=$sub_fusion->ingredient_unawaken[$num]->name?>' href='/<?=$UID?>/catalog/<?=$sub_fusion->ingredient_unawaken[$num]->id?>'>
                                                        <div class='unawakened monster_panel'>
                                                            <span class='stars'>
<?php
                                                                for ($i = 0; $i < $sub_fusion->ingredient_unawaken[$num]->base_stars; $i ++){
?>
                                                                    <img class='star star_gold' src='<?=$path["img"]["icon"]?>star.png'/>
<?php
                                                                }
?>
                                                            </span>
                                                            <img title='<?=$sub_fusion->ingredient_unawaken[$num]->name?>' class='monster border_<?=$sub_fusion->ingredient_unawaken[$num]->element_name?>' src='<?=$sub_fusion->ingredient_unawaken[$num]->get_image()?>'/>
                                                            <span class='level'>
                                                                1
                                                            </span>
                                                        </div><!-- .unawakened .monster_panel -->
                                                    </a>
                                                    <div class='owned'>
                                                        <span class='owned'>
                                                            Collection:
                                                        </span>
<?php
                                                        foreach ($sub_monster->owned as $owned){
                                                            if ($owned->unit->awakens_from == "" && $owned->unit->awakens_to == ""){
                                                                // No to, no from, silver monster.
                                                                $star_class ="star_silver";
                                                                $mon_title = $owned->unit->element_name . " " . $owned->unit->name;
                                                            }
                                                            elseif ($owned->unit->awakens_from != "" && $owned->unit->awakens_to == ""){
                                                                // Already awakened
                                                                if ($owned->unit->base_stars - $owned->unit->natural_stars == 1){
                                                                    // Normal awaken.
                                                                    $star_class ="star_purple";
                                                                }
                                                                else{
                                                                    // Second awaken.
                                                                    $star_class ="star_red";
                                                                }
                                                                $mon_title = $owned->unit->name;
                                                            }
                                                            elseif ($owned->unit->awakens_to != ""){
                                                                // Awakeable.
                                                                $star_class ="star_gold";
                                                                $mon_title = $owned->unit->element_name . " " . $owned->unit->name;
                                                            }
                                                            $mon_title = $mon_title . " - " . $owned->stars . "* - Lv." . $owned->level;
?>
                                                            <a target="_blank" title='<?=$mon_title?>' href='/<?=$UID?>/monsters/<?=$owned->id?>'>
                                                                <div class='monster_panel'>
                                                                    <span class='stars'>
<?php
                                                                        for ($i = 0; $i < $owned->stars; $i ++){
?>
                                                                            <img class='star <?=$star_class?>' src='<?=$path["img"]["icon"]?>star.png'/>
<?php
                                                                        }
?>
                                                                    </span>
                                                                    <img title='<?=$mon_title?>' class='monster border_<?=$owned->unit->element_name?>' src='<?=$owned->unit->get_image()?>'/>
                                                                    <span class='level'>
                                                                        <?=$owned->level?>
                                                                    </span>
                                                                </div>
                                                            </a>
<?php
                                                        }
?>
                                                    </div><!-- .owned -->
                                                </div><!-- product -->
                                            </div><!-- .f3 -->
<?php
                                            $num ++;
                                        }
?>
                                    </div><!-- .ingredients -->
                                </div><!-- .f4 -->
<?php
                            } // foreach ($fusion->product->owned as $owned)
?>
                            <!-- Last ingredient, non fuseable -->
                            <div class='f4 extra'>
                                <div class='product'>
                                    <a target='_blank' title='<?=$fusion->ingredient[0]->name?>' href='/<?=$UID?>/catalog/<?=$fusion->ingredient[0]->id?>'>
                                        <div class='awakened monster_panel'>
                                            <span class='stars'>
                                                <img class='star star_purple' src='<?=$path["img"]["icon"]?>star.png'/>
                                                <img class='star star_purple' src='<?=$path["img"]["icon"]?>star.png'/>
                                                <img class='star star_purple' src='<?=$path["img"]["icon"]?>star.png'/>
                                                <img class='star star_purple' src='<?=$path["img"]["icon"]?>star.png'/>
                                                <img class='star star_purple' src='<?=$path["img"]["icon"]?>star.png'/>
                                            </span>
                                            <img title='<?=$fusion->ingredient[0]->name?>' class='monster border_<?=$fusion->ingredient[0]->element_name?>' src='<?=$fusion->ingredient[0]->get_image()?>'/>
                                            <span class='level'>
                                                35
                                            </span>
                                        </div><!-- .awakened .monster_panel -->
                                    </a>
                                    <div class='essences'>
<?php
                                        foreach ($fusion->ingredient_unawaken[0]->essences as $essence){
?>
                                            <div class='essence border_<?=$essence["element"]?>'>
                                                <img alt='<?=$essence["grade"]?> <?=$essence["element"]?> essence' title='<?=$essence["amount"]?>x <?=$essence["grade"]?> <?=$essence["element"]?> essence' class='essence' src='<?=$path["img"]["essence"]?><?=$essence["element"]?>_<?=$essence["grade"]?>.png'/>
                                                <span>
                                                    <?=$essence["amount"]?>
                                                </span>
                                            </div>
<?php
                                        }
?>
                                    </div><!-- .essences -->
                                    <a target='_blank' title='<?=$fusion->ingredient_unawaken[0]->name?>' href='/<?=$UID?>/catalog/<?=$fusion->ingredient_unawaken[0]->id?>'>
                                        <div class='unawakened monster_panel'>
                                            <span class='stars'>
<?php
                                                for ($i = 0; $i < $fusion->ingredient[0]->base_stars; $i ++){
?>
                                                    <img class='star star_gold' src='<?=$path["img"]["icon"]?>star.png'/>
<?php
                                                }
?>
                                            </span>
                                            <img title='<?=$fusion->ingredient_unawaken[0]->name?>' class='monster border_<?=$fusion->ingredient_unawaken[0]->element_name?>' src='<?=$fusion->ingredient_unawaken[0]->get_image()?>'/>
                                            <span class='level'>
                                                1
                                            </span>
                                        </div><!-- .unawakened .monster_panel -->
                                    </a>
                                    <div class='owned'>
                                        <span class='owned'>
                                            Collection:
                                        </span>
<?php
                                        foreach ($fusion->ingredient[0]->owned as $owned){
?>
                                            <div class='monster_panel'>
                                                <span class='stars'>
<?php
                                                    if ($owned->unit->awakens_from == "" && $owned->unit->awakens_to == ""){
                                                        // No to, no from, silver monster.
                                                        $star_class ="star_silver";
                                                        $mon_title = $owned->unit->element_name . " " . $owned->unit->name;
                                                    }
                                                    elseif ($owned->unit->awakens_from != "" && $owned->unit->awakens_to == ""){
                                                        // Already awakened
                                                        if ($owned->unit->base_stars - $owned->unit->natural_stars == 1){
                                                            // Normal awaken.
                                                            $star_class ="star_purple";
                                                        }
                                                        else{
                                                            // Second awaken.
                                                            $star_class ="star_red";
                                                        }
                                                        $mon_title = $owned->unit->name;
                                                    }
                                                    elseif ($owned->unit->awakens_to != ""){
                                                        // Awakeable.
                                                        $star_class ="star_gold";
                                                        $mon_title = $owned->unit->element_name . " " . $owned->unit->name;
                                                    }
                                                    for ($i = 0; $i < $owned->stars; $i ++){
?>
                                                    <img class='star <?=$star_class?>' src='<?=$path["img"]["icon"]?>star.png'/>
<?php
                                                    }
?>
                                                </span>
                                                <img title='<?=$mon_title?>' class='monster border_<?=$owned->unit->element_name?>' src='<?=$owned->unit->get_image()?>'/>
                                                <span class='level'>
                                                    <?=$owned->level?>
                                                </span>
                                            </div>
<?php
                                        }
?>
                                    </div><!-- .owned -->
                                </div><!-- .product -->
                            </div><!-- .f4 -->
                        </div><!-- .ingredients -->
                    </div><!-- .f5 -->
                </article>
            </section>
<?php
        } // foreach ($page->fusion as $fusion)
        include __DIR__ . "/inc/footer.php";
?>
    </body>
</html>
