<?php
    global $ELEMENT;
?>
<!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"]?>monster_info.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";
        for ($i = 0; $i < 3; $i ++){
            if ($page->monster[$i] != null){
?>
                <section class='content'>
                    <h2>
                        <?=$page->monster[$i]->title?>
                        <!-- TODO: REWORK
                        <span class='family'>
<?php
                            //for ($f = 0; $f < 5; $f++){
                            foreach (Array($ELEMENT["FIRE"], $ELEMENT["WATER"], $ELEMENT["WIND"], $ELEMENT["LIGHT"], $ELEMENT["DARK"]) as $element){
                                //$element = array_keys($page->family)[$f];
                                //$id = $page->family[$f];
                                $id = $page->family[$element];
                                $current = "";
                                $disabled = "";
                                if ($element == $page->monster[$i]->element){
                                    $current = "current";
                                }
                                elseif ($id == null){
                                    $disabled = "disabled";
                                }
                                $url = "/catalog/$id";
                                if ($current == "" && $disabled == ""){
?>
                                    <a href='<?=$url?>'>
<?php
                                }
?>
                                <img class='family <?=$current?> <?=$disabled?>' src='<?=$path["img"]["element"] . "$element.png"?>'/>
<?php
                                if ($current == "" && $disabled == ""){
?>
                                    </a>
<?php
                                }
                            }
?>
                        </span>  -->
                    </h2>
                    <article class='stage'>
                        <div class='profile'>
                            <div class='monster_panel'>
                                <?=html_unit_panel($page->monster[$i])?>
                            </div>
                        </div>
                        <table class='stats'>
                            <tr>
                                <th>
                                    Type
                                </th>
                                <th>
                                    <?=$page->monster[$i]->archetype_name?>
                                </th>
                            </tr>
                            <tr>
                                <th>
                                    ATK
                                </th>
                                <td>
                                    <?=$page->monster[$i]->attack?>
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    DEF
                                </th>
                                <td>
                                    <?=$page->monster[$i]->defense?>
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    HP
                                </th>
                                <td>
                                    <?=$page->monster[$i]->hp?>
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    SPD
                                </th>
                                <td>
                                    <?=$page->monster[$i]->speed?>
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    CRR
                                </th>
                                <td>
                                    <?=$page->monster[$i]->crit_rate?>%
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    CRD
                                </th>
                                <td>
                                    <?=$page->monster[$i]->crit_damage?>%
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    ACC
                                </th>
                                <td>
                                    <?=$page->monster[$i]->accuracy?>%
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    RES
                                </th>
                                <td>
                                    <?=$page->monster[$i]->resistance?>%
                                </td>
                            </tr>
                        </table>
                        <div class='extra'>
<?php
                            if (count($page->monster[$i]->sources) > 0){
?>
                                <!-- TODO NOT WORKING<div class='sources'>
                                    <span>
                                        Obtainable from:
                                    </span>
<?php
                                    foreach ($page->monster[$i]->sources as $source){
?>
                                        <img title='<?=$source->name?>' class='source' src='<?=$source->get_image()?>' />
<?php
                                    }
?>
                                </div>-->
<?php
                            }
                            if (count($page->monster[$i]->essences) > 0){
?>
                                <div class='essences'>
                                    <span>
                                        Awake with:
                                    </span>
<?php
                                    foreach ($page->monster[$i]->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>
<?php
                            }
?>
                        </div> <!-- .extra -->
                        <div class='skills'>
<?php
                            if ($page->monster[$i]->leader_skill){
?>
                                <div class='skill'>
                                    <img class='skill_img' src='<?=$page->monster[$i]->leader_skill->get_image()?>'/>
                                    <span class='skill_level'>
                                        &nbsp;
                                    </span>
                                    <span class='skill_name'>
                                        Leader skill
                                    </span>
                                    <span class='skill_description'>
                                        <?=$page->monster[$i]->leader_skill->create_description()?>
                                    </span>
                                </div>
<?php
                            }
                            foreach ($page->monster[$i]->skill as $skill){
?>
                                <div class='skill'>
                                    <img class='skill_img' src='<?=$skill->get_image()?>'/>
                                    <span class='skill_name'>
                                        <?=$skill->name?>
                                    </span>
                                    <span class='skill_description'>
                                        <?=$skill->description?>
                                    </span>
<?php
                                    if (count($skill->effect) > 0){
?>
                                        <span class='skill_effects'>
<?php
                                            foreach ($skill->effect as $effect){
?>
                                                <img class='effect_img' title='<?=$effect->name?>' src='<?=$effect->get_image()?>'/>
<?php
                                            }
?>
                                        </span>
<?php
                                    }
                                    if ($skill->max_level > 1){
?>
                                        <table class='skill_up'>
<?php
                                            foreach ($skill->level as $level){
                                                if ($level->level > 1){
?>
                                                    <tr>
                                                        <td class='level'>
                                                            Lv. <?=$level->level?>
                                                        </td>
                                                        <td class='description'>
                                                            <?=$level->description?>
                                                        </td>
                                                    </tr>
<?php
                                                }
                                            }
?>
                                        </table>
<?php
                                    }
?>
                                </div>
<?php
                            }
?>
                        </div> <!-- #skills -->
                    </article>
                </section>
<?php
            } // if ($page->monster[$i] != null)
        } // for (int $i = 0; $i < 3; $i ++)
        include __DIR__ . "/inc/footer.php";
?>
    </body>
</html>
