<?php
/** @var $locale PleskMobile_Locale */
$locale = $this->locale;
?>
<div id="device-image">
    <div class="default fallback">&nbsp;</div>
    <div class="android hidden">&nbsp;</div>
    <div class="iphone hidden">&nbsp;</div>
    <div class="blackberry hidden">&nbsp;</div>
</div>
<h1><?php echo $locale->l('headerPart1')  . ' ' . $locale->l('headerPart2'); ?></h1>

<p><?php echo $locale->l('generalHint1'); ?></p>

<p><?php echo $locale->l('generalHint2'); ?></p>

<h3><?php echo $locale->l('deviceHeader'); ?></h3>


<div class="clear"></div>
<div class="tab-wrapper">
<div class="tabs">
    <a href="#android"><span><?php echo $locale->l('forAndroid'); ?></span></a>
    <a href="#iphone"><span><?php echo $locale->l('forIphone'); ?></span></a>
    <a href="#blackberry"><span><?php echo $locale->l('forBlackberry'); ?></span></a>
</div>
<!-- Android -->
<h2><?php echo $locale->l('android'); ?></h2>

<div class="tab box" id="android">
    <div class="content">
        <div class="guide">
            <h3><?php echo $locale->l('step1'); ?></h3>

            <div class="instructions box">
                <img src="<?php echo $this->baseUrl;?>/static/img/guide/steps-android-manager_001.png" alt="Download" width="250" height="250" />

                <p class="guide-text">
                    <?php echo $locale->l('step1AndroidText', array(
                        'installLink' => "
                            <a href=\"{$this->apps[$this->mode]['android']}\">" .
                            $locale->l('step1AndroidLinkText') . '</a>',
                    )); ?>
                </p>

                <div class="clear"></div>
            </div>
        </div>
        <div class="guide right">
            <h3><?php echo $locale->l('step2'); ?></h3>

            <div class="instructions box">
                <img src="<?php echo $this->baseUrl;?>/static/img/guide/steps-android-manager_002.png" alt="Download" width="250" height="250" />

                <p class="guide-text">
                    <?php echo $locale->l('step2AndroidText', array(
                        'addButton' => '<strong>' . $locale->l('step2ButtonText') . '</strong>',
                    )); ?>
                </p>

                <div class="clear"></div>
            </div>
        </div>
        <div class="guide">
            <h3><?php echo $locale->l('step3'); ?></h3>

            <div class="instructions box">
                <img src="<?php echo $this->baseUrl;?>/static/img/guide/steps-android-manager_003.png" alt="Download" width="250" height="250" />

                <p class="guide-text">
                    <?php echo $locale->l('step3Text1', array(
                        'addButton' => $locale->l('step3ButtonText')
                    )); ?>
                </p>

                <p class="guide-text">
                    <?php echo $locale->l('step3Text2'); ?>
                </p>

                <p class="guide-text large mobile-connector-url">
                </p>

                <div class="clear"></div>
            </div>
        </div>
        <div class="guide right">
            <h3><?php echo $locale->l('step4'); ?></h3>

            <div class="instructions box">
                <img src="<?php echo $this->baseUrl;?>/static/img/guide/steps-android-manager_004.png" alt="Download" width="250" height="250" />

                <p class="guide-text">
                    <?php echo $locale->l('step4Text1'); ?>
                </p>

                <div class="clear"></div>
            </div>
        </div>
        <div class="guide">
            <h3><?php echo $locale->l('step5'); ?></h3>

            <div class="instructions box">
                <img src="<?php echo $this->baseUrl;?>/static/img/guide/steps-android-manager_005.png" alt="Download" width="250" height="250" />

                <div class="guide-text">
                    <?php echo $locale->l('step5Text1'); ?>
                </div>
                <div class="clear"></div>
            </div>
        </div>
    </div>
</div>
<!-- /Android -->
<!-- iPhone -->
<h2><?php echo $locale->l('iphone'); ?></h2>

<div class="tab box" id="iphone">
    <div class="content">
        <div class="guide">
            <h3><?php echo $locale->l('step1'); ?></h3>

            <div class="instructions box">
                <img src="<?php echo $this->baseUrl;?>/static/img/guide/steps-iphone-manager_001.png" alt="Download" width="250" height="250" />

                <p class="guide-text">
                    <?php echo $locale->l('step1IphoneText', array(
                        'installLink' =>
                            "<a href=\"{$this->apps[$this->mode]['iphone']}\">" .
                            $locale->l('step1IphoneLinkText') . '</a>',
                    )); ?>
                </p>

                <div class="clear"></div>
            </div>
        </div>
        <div class="guide right">
            <h3><?php echo $locale->l('step2'); ?></h3>

            <div class="instructions box">
                <img src="<?php echo $this->baseUrl;?>/static/img/guide/steps-iphone-manager_002.png" alt="Download" width="250" height="250" />

                <p class="guide-text">
                    <?php echo $locale->l('step2IphoneText', array(
                        'addButton' => '<strong>' . $locale->l('step2ButtonText') . '</strong>',
                    )); ?>
                </p>

                <div class="clear"></div>
            </div>
        </div>
        <div class="guide">
            <h3><?php echo $locale->l('step3'); ?></h3>

            <div class="instructions box">
                <img src="<?php echo $this->baseUrl;?>/static/img/guide/steps-iphone-manager_003.png" alt="Download" width="250" height="250" />

                <p class="guide-text">
                    <?php echo $locale->l('step3Text1', array(
                        'addButton' => $locale->l('step3ButtonText')
                    )); ?>
                </p>

                <p class="guide-text">
                    <?php echo $locale->l('step3Text2'); ?>
                </p>

                <p class="guide-text large mobile-connector-url">
                </p>

                <div class="clear"></div>
            </div>
        </div>
        <div class="guide right">
            <h3><?php echo $locale->l('step4'); ?></h3>

            <div class="instructions box">
                <img src="<?php echo $this->baseUrl;?>/static/img/guide/steps-iphone-manager_004.png" alt="Download" width="250" height="250" />

                <p class="guide-text">
                    <?php echo $locale->l('step4Text1'); ?>
                </p>

                <div class="clear"></div>
            </div>
        </div>
        <div class="guide">
            <h3><?php echo $locale->l('step5'); ?></h3>

            <div class="instructions box">
                <img src="<?php echo $this->baseUrl;?>/static/img/guide/steps-iphone-manager_005.png" alt="Download" width="250" height="250" />

                <div class="guide-text">
                    <?php echo $locale->l('step5Text1'); ?>
                </div>
                <div class="clear"></div>
            </div>
        </div>
    </div>
</div>
<!-- /iPhone -->
<!-- BlackBerry -->
<h2><?php echo $locale->l('blackberry'); ?></h2>

<div class="tab box" id="blackberry">
    <div class="content">
        <div class="guide">
            <h3><?php echo $locale->l('step1'); ?></h3>

            <div class="instructions box">
                <img src="<?php echo $this->baseUrl;?>/static/img/guide/steps-bb-manager_001.png" alt="Download" width="250" height="250" />

                <p class="guide-text">
                    <?php echo $locale->l('step1BlackberryText', array(
                        'installLink' =>
                            "<a href=\"{$this->apps[$this->mode]['blackberry']}\">" .
                            $locale->l('step1BlackberryLinkText') . '</a>',
                    )); ?>
                </p>

                <div class="clear"></div>
            </div>
        </div>
        <div class="guide right">
            <h3><?php echo $locale->l('step2'); ?></h3>

            <div class="instructions box">
                <img src="<?php echo $this->baseUrl;?>/static/img/guide/steps-bb-manager_002.png" alt="Download" width="250" height="250" />

                <p class="guide-text">
                    <?php echo $locale->l('step2BlackberryText', array(
                        'addButton' => '<strong>' . $locale->l('step2ButtonText') . '</strong>',
                    )); ?>
                </p>

                <div class="clear"></div>
            </div>
        </div>
        <div class="guide">
            <h3><?php echo $locale->l('step3'); ?></h3>

            <div class="instructions box">
                <img src="<?php echo $this->baseUrl;?>/static/img/guide/steps-bb-manager_003.png" alt="Download" width="250" height="250" />

                <p class="guide-text">
                    <?php echo $locale->l('step3Text1', array(
                        'addButton' => $locale->l('step3ButtonText')
                    )); ?>
                </p>

                <p class="guide-text">
                    <?php echo $locale->l('step3Text2'); ?>
                </p>

                <p class="guide-text large mobile-connector-url">
                </p>

                <div class="clear"></div>
            </div>
        </div>
        <div class="guide right">
            <h3><?php echo $locale->l('step4'); ?></h3>

            <div class="instructions box">
                <img src="<?php echo $this->baseUrl;?>/static/img/guide/steps-bb-manager_004.png" alt="Download" width="250" height="250" />

                <p class="guide-text">
                    <?php echo $locale->l('step4Text1'); ?>
                </p>

                <div class="clear"></div>
            </div>
        </div>
        <div class="guide">
            <h3><?php echo $locale->l('step5'); ?></h3>

            <div class="instructions box">
                <img src="<?php echo $this->baseUrl;?>/static/img/guide/steps-bb-manager_005.png" alt="Download" width="250" height="250" />

                <div class="guide-text">
                    <?php echo $locale->l('step5Text1'); ?>
                </div>
                <div class="clear"></div>
            </div>
        </div>
    </div>
</div>
<!-- /BlackBerry -->
</div>

<div class="description">
    <div class="column1">
        <h3><?php echo $locale->l('descriptionColumn1Header'); ?></h3>

        <p><?php echo $locale->l('descriptionColumn1Text1'); ?></p>

        <p><?php echo $locale->l('descriptionColumn1Text2'); ?></p>
        <ul>
            <?php
                for($i = 1; $locale->prefixedKeyExists('descriptionColumn1Item' . $i); $i++) {
                    echo '<li>' . $locale->l('descriptionColumn1Item'.$i) . "</li>\n";
                }
            ?>
        </ul>
    </div>
</div>
<script type="text/javascript">
    $('.tab-wrapper > h2, .tab-wrapper .tab').hide();
    $('.tab-wrapper').addClass('js');
    $(function ()
    {
        $('.mobile-connector-url').html(document.location.hostname);
    });
</script>
