[% SET CPANEL.CPVAR.dprefix = "../../" %]
[% js_code = PROCESS js_block %]
[% css_code = PROCESS css_block %]
[% WRAPPER '_assets/master.html.tt'
    page_js = js_code
    page_styles = css_code
    app_key = 'ftp_accounts'
 -%]

<div class="body-content">

    <div class="heading">[% locale.maketext("Core FTP Instructions") %]</div>
    <hr color="#04586c"/>
    <br/><br/>

    <table width='100%'>
        <tr>
            <td class="step_number"><div class="round">[% locale.numf(1) %]</div></td>
            <td class="step"><h2>[% locale.maketext("Step One") %]</h2><br/>
                [% locale.maketext("Download and install [output,url,_1,Core FTP].", "https://go.cpanel.net/coreftp") %]
            </td>
        </tr>
        <tr>
            <td class="step_number"><div class="round">[% locale.numf(2) %]</div></td>
            <td class="step"><h2>[% locale.maketext("Step Two") %]</h2>&nbsp;&nbsp;<span id='ss1' class='toggle_link'><img src="images/screenshot.png" alt="[% locale.maketext("Toggle Screenshot") %]"></span>
                <br/>[% locale.maketext("Select either the [output,em,FTP Configuration File] or the [output,em,SFTP Configuration File] option and save it to your desktop.") %]
                [% locale.maketext("Whenever possible, we recommend using SFTP, as it is more secure.") %]
                <img src="../../images/coreftp-ss1.png" class="hidden_screen" id="ss1_img"/>
            </td>
        </tr>
        <tr>
            <td class="step_number"><div class="round">[% locale.numf(3) %]</div></td>
            <td class="step"><h2>[% locale.maketext("Step Three") %]</h2>&nbsp;&nbsp;<span id='ss3' class='toggle_link'><img src="images/screenshot.png" alt="[% locale.maketext("Toggle Screenshot") %]"></span><br/>
                [% locale.maketext("To import Core FTP configuration settings, click [output,em,Sites⇀Site Manager]. Next, right click the main window and click [output,em,Import⇀Core FTP]. Select the saved configuration file to import the data.") %]
                <img src="../../images/coreftp-ss3.png" class="hidden_screen" id="ss3_img"/>
            </td>
        </tr>
    </table>
    <br/><br/>
    <p>[% locale.maketext("Note: Third party products are subject to change due to circumstances beyond cPanel’s control, potentially rendering these instructions invalid. If this occurs, you can always consult the product manual for the correct procedure.") %]</p>
</div>
[% END #wrapper -%]

[% BLOCK css_block %]
[%# TODO: Remove styles to separate style sheet! %]
<style type="text/css">
    .step_number {
        width: 40px;
        vertical-align: middle;
        text-align: center;
        font-size: 13pt;
        background-color: #DDDDDD;
        border-radius: 10px;
    }
    .step {
        min-height: 100px;
        color: #666666;
        font-size: 11pt;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 20px;
    }
    .step h2 {
        font-weight: bold;
        font-size: 13pt;
        margin-left: 0px;
        display: inline;
    }
    .round {
        margin-left: auto;
        margin-right: auto;
        border-radius: 90px;
        width: 26px;
        background-color: #04586c;
        color: white;
        border: 2px solid #aaaaaa;
        font-weight: bold;
        font-size: 15pt;
    }
    .heading {
        font-size: 16pt;
        color: #04586c;
    }
    td {
        border-bottom: 1px solid #dddddd;
    }
    .hidden_screen {
        display: none;
        max-width: 99%;
        padding-top: 10px;
    }
    .toggle_link {
        text-decoration: underline;
        font-size: 9pt;
        cursor: pointer;

    }
</style>
[% END #css_block %]

[% BLOCK js_block %]
<script type="text/javascript">
    YAHOO.util.Event.onDOMReady( function () {
        elements = YAHOO.util.Dom.getElementsByClassName('toggle_link');
        for (var i=0; i<elements.length; i++) {
            YAHOO.util.Event.on(elements[i],'click', function () {
                if (document.getElementById(this.id+'_img').style.display==='block') {
                    CPANEL.animate.slide_up(this.id+'_img');
                } else {
                    CPANEL.animate.slide_down(this.id+'_img');
                }
            });
        }
    });
</script>
[% END #js_block %]