<?php
    /**
     * Fusion view.
     *
     * Contains the view layout and some code to present the data.
     *
     * @category View
     * @property_read Fusion_Page $page The page model.
     * @property_read int $UID Player ID.
     */
?>
<!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='<?=URL::CSS?>ui.css'/>
        <link rel='stylesheet' type='text/css' href='<?=URL::CSS?>fusion.css'/>
        <link rel='stylesheet' type='text/css' href='<?=URL::CSS?>filters.css'/>
        <!-- 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'/>
        <script>

            /**
             * Shows or hiddes the filters panel.
             */
            function toggleFilters(){
                var content = document.getElementById('filters_content');
                var slid = document.getElementById('filters_slid');
                if (content.style.maxHeight != '30em'){
                    content.style.maxHeight = '30em';
                    slid.style.transform = 'rotate(90deg)';
                }
                else{
                    content.style.maxHeight = '0px';
                    slid.style.transform = 'rotate(0deg)';
                }
            };
        </script>
    </head>
    <body>
<?php
        include __DIR__ . "/inc/header.php";
?>
        <section class='filters'>
            <h2 id='filters_title' onClick='toggleFilters();'>
                <img id='filters_slid' id='filters_slid' alt=' ' src='<?=URL::IMG["ICON"]?>slid.png'/>
                Fusion filters
            </h2>
            <article id='filters_content'>
<?php
                $filters = $page->filters;
                $custom_filters = $page->custom_filters;
                include __DIR__ . "/inc/filter_fusion.php";
?>
            </article>

        </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='<?=URL::IMG["ICON"]?>star.png'/>
                                        <img class='star star_gold' src='<?=URL::IMG["ICON"]?>star.png'/>
                                        <img class='star star_gold' src='<?=URL::IMG["ICON"]?>star.png'/>
                                        <img class='star star_gold' src='<?=URL::IMG["ICON"]?>star.png'/>
                                        <img class='star star_gold' src='<?=URL::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='<?=URL::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='<?=URL::IMG["ICON"]?>star.png'/>
                                                    <img class='star star_purple' src='<?=URL::IMG["ICON"]?>star.png'/>
                                                    <img class='star star_purple' src='<?=URL::IMG["ICON"]?>star.png'/>
                                                    <img class='star star_purple' src='<?=URL::IMG["ICON"]?>star.png'/>
                                                    <img class='star star_purple' src='<?=URL::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='<?=URL::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='<?=URL::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='<?=URL::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='<?=URL::IMG["ICON"]?>star.png'/>
                                                                <img class='star star_purple' src='<?=URL::IMG["ICON"]?>star.png'/>
                                                                <img class='star star_purple' src='<?=URL::IMG["ICON"]?>star.png'/>
                                                                <img class='star star_purple' src='<?=URL::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='<?=URL::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='<?=URL::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='<?=URL::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='<?=URL::IMG["ICON"]?>star.png'/>
                                                <img class='star star_purple' src='<?=URL::IMG["ICON"]?>star.png'/>
                                                <img class='star star_purple' src='<?=URL::IMG["ICON"]?>star.png'/>
                                                <img class='star star_purple' src='<?=URL::IMG["ICON"]?>star.png'/>
                                                <img class='star star_purple' src='<?=URL::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='<?=URL::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='<?=URL::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='<?=URL::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>

