<?php

/**
 * @author epointal
 * Template for div containing track informations
 */
if ( ! defined( 'ABSPATH' ) ) exit;
?>
<div id="<?=$track_id?>" class="lfh-info-<?=$map_count?> lfh-element lfh-hidden step0"  >
    <div>
        <!-- header -->
        <div class="lfh-head">
            <h3 >
                 <span class="lfh-trackname"><?=ucfirst( stripslashes ($options['title']))?>&nbsp;</span>
                <span  class="lfh-close lfhicon lfhicon-close" >&nbsp;</span>
            </h3>
        </div>
        <!-- end header -->
        <div class="lfh-element-content">
        <div  class="lfh-file">
        <!-- control buttons -->
          <?php if($options['button']):?>
            <div >
                <a  href="<?=$options['src']?>"  download="<?php echo basename($options['src']);?>" class="lfh-gpx-file"  >
                <span class="lfhicon lfhicon-download"> &nbsp;<?=$file_type?></span>
                </a>
            </div>
         <?php endif;?>
        </div>
        <div class="lfh-section">
              <div class="lfh-header">
              <h4 style="margin-bottom: 2px;"><?=ucfirst(__('profile', 'lfh'));?></h4>
              </div>
               <div class="lfh-content" >
                    <div>
                    <svg class="lfh-profile"  viewBox="0 0 290 220" >
                        <defs>
                            <marker id="t" markerWidth="4" markerHeight="4" orient="auto" refY="2" refX="3">
                              <path d="M0,0 L4,2 0,4" fill="#000"></path>
                            </marker>
                        </defs>
                        <g transform="translate(50,10)">
                        <!-- horizontal -->
                        <!-- y = 50 (180-50)-->
                        <line class="line" x1="-5" y1="160" x2="220" y2="160"></line>
                        <text class="h1 line" x="-5" y="160" text-anchor="end">50</text>
                        <line class="line" x1="-5" y1="120" x2="220" y2="120"></line>
                        <text class="h2 line" x="-5" y="120" text-anchor="end">100</text>
                        <line class="line" x1="-5" y1="80" x2="220" y2="80"></line>
                        <text class="h3 line" x="-5" y="80" text-anchor="end">150</text>
                         <line class="line" x1="-5" y1="40" x2="220" y2="40"></line>
                        <text class="h4 line" x="-5" y="40" text-anchor="end">200</text>
                        <!-- Vertical -->
                        <g class="v1" transform="translate(60,0)">
                            <line class="line" x1="0" y1="0" x2="0" y2="185"></line>
                            <text  class="line" x="0" y="193" text-anchor="middle">5</text>
                        </g>
                        <g class="v2" transform="translate(120,0)">
                            <line class="line" x1="0" y1="0" x2="0" y2="185"></line>
                            <text  class="line" x="0" y="193" text-anchor="middle">10</text>
                        </g>
                        <g class="v3" transform="translate(180,0)">
                            <line class="line" x1="0" y1="0" x2="0" y2="185"></line>
                            <text id="v3" class="line" x="0" y="193" text-anchor="middle">15</text>
                        </g>
                        <!-- cadre  -->
                        <rect x="0" y="0" width="220" height="180" ></rect>
                        <!-- horizontal axis x -->
                         <line class="axis" x1="0" y1="180" x2="210" y2="180"  marker-end="url(#t)"></line>
                           <text x="110" y="210" text-anchor="middle"><?=ucfirst(__('distance','lfh'))?> (<?=Lfh_Model_Map::distance_units()[$options['unit']]['code']?>)</text>
                           <!-- vertical axis y -->
                        <line class="axis" x1="0" y1="180" x2="0" y2="10" marker-end="url(#t)"></line>
                        <text x="0" y="0" transform="rotate(-90) translate(-100, -40)" text-anchor="middle"><?=ucfirst( __('elevation', 'lfh'))?> (<?=Lfh_Model_Map::height_units()[$options['unit_h']]['code']?>)</text>
                        <path class="lfh-profile-line" d=""></path>
                       
                        <line class="lfh-move-line" x1="0" y1="185" x2="0" y2="-5"></line>
                    </g>
                    </svg>
                    <div class="lfh-no-data"><?=ucfirst(__('no data elevation', 'lfh'))?></div>
                    </div>
                    <div>
                        <div >
                            <span ><?=ucfirst(__('name' ,'lfh'))?>: </span>
                            <span class="lfh-gpx-name"><em><?=ucfirst(__('no data', 'lfh'))?></em></span>
                        </div>
                        <div >
                            <span><?=ucfirst(__('distance', 'lfh'))?>: </span>
                            <span class="lfh-gpx-distance"><em><?=ucfirst(__('no data', 'lfh'))?></em></span>
                        </div>
                         <div>
                            <span><?=ucfirst(__('minimum elevation', 'lfh'))?>: </span>
                            <span  class="lfh-gpx-min-elevation" ><em><?=ucfirst(__('no data', 'lfh'))?></em></span>
                        </div>
                         <div>
                            <span><?=ucfirst(__('maximum elevation', 'lfh'))?>: </span>
                            <span  class="lfh-gpx-max-elevation" ><em><?=ucfirst(__('no data', 'lfh'))?></em></span>
                        </div>
                        <div>
                            <span><?=ucfirst(__('elevation gain', 'lfh'))?>: </span>
                            <span  class="lfh-gpx-elevation-gain" ><em><?=ucfirst(__('no data', 'lfh'))?></em></span>
                        </div>
                        <div >
                            <span><?=ucfirst(__('elevation loss', 'lfh'))?>: </span>
                            <span class="lfh-gpx-elevation-loss" ><em><?=ucfirst(__('no data', 'lfh'))?></em></span>
                        </div>
                            <span><?=ucfirst(__('duration', 'lfh'))?>: </span>
                            <span class="lfh-gpx-duration" ><em><?=ucfirst(__('no data', 'lfh'))?></em></span>
                        <div>
                        </div>
                    </div>
               </div>
          </div>
          <!-- misc info -->
        <?php if(strlen($html)>0):?>
        <div class="lfh-section lfh-hidden">
            <div class="lfh-header">
            <h4><?=ucfirst( __('description', 'lfh'))?></h4>
            </div>    
            <div class="lfh-content lfh-description" >
            <?php echo do_shortcode($html);?>
            </div>
        </div>
        <?php endif;?>
        </div>
    </div>
   
</div>
