<meta charset="UTF-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
<link rel="stylesheet" href="{{context}}/static/css/default.css" type="text/css">
<link rel="stylesheet" href="{{context}}/static/css/borders.css" type="text/css">
<link href="{{context}}/static/css/fa/css/all.css" rel="stylesheet" type="text/css">
<script src="{{context}}/static/css/fa/js/all.js" ></script>

<script type="text/javascript" src="{{ context }}/static/js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="{{ context }}/static/js/jx/rpc.js"></script>
<script type="text/javascript" src="{{ context }}/static/js/jx/utils.js"></script>
<script type="text/javascript" src="{{ context }}/static/js/jx/dom.js"></script>

<title style="text-transform: capitalize">Signup {{product.replace('-',' ')}}</title>
<style>
    .pane {
        display:grid;
        align-content: center;
        grid-gap:1px;
        grid-template-columns: 25% auto;
        min-width:500px;
        font-size:16px;
        
        
    }
    
    
    .signup-button {
        display:flex; 
        align-items:center; 
        padding:4px; 
        border:2px solid #CAD5E0; 
        border-radius:4px; 
        margin:2px; 
        height:30px; 
        font-size:14px; 
        width:185px; 
        cursor:pointer;
        background-color:#FFFFFF;
        color:#000000;
    }
   
    .signup-button img {
        margin:4px;
        width:30px;
        background:#ffffff;
        margin-right:15px;
    }
    
    .signup-button span {font-weight:bold}
    .signup-button:hover {
        color:#4682b4;
        background-color:#ffffff;
        border-color:#4682b4
    }
    .signup-button:hover i{
        color:#000000;
    }
    .title {
        display:grid;
        grid-gap:2px;
        grid-template-columns: 32px auto;
        align-items: center;
        
    }

    .input-form input[type=text] {
        padding:6px; width:99%;
        margin:4px;
        color:#000000;
        border:2px solid transparent;
        background-color:#f3f3f3;
    }
    .input-form input[type=text]:focus{
        outline:none;
        border-left-color:#4682b4 ;
    }
    i {font-size:18px;}
    .more {display:none}
    .dialog {display:none}
</style>
<body >
    
    <div class="pane">
        <div class="" style="grid-column:1 /span 2; display:grid; grid-template-columns:auto 48px; gap:1px">
            <div class="bold border-bottom">Signup <span id="signup-plan" style="text-transform:capitalize"></span></div>
            <div align="center" class="active" onclick="jx.modal.close()"><i class="fa fa-times" style="font-size:18px;"></i></div>
        </div>

       <div align="center" style="margin-top:22px;">
        
        <div class="bold"><i class="fa fa-check"></i> <span id="plan-price" class="small"></span></div>
        <div align="center">
            <img id='plan-image' src='' style="width:96px; margin:4px">
        </div>
       </div>

        <div class="auth">
            <p>
                    <div align="center" style="display:grid; align-content:center; justify-content:center" >
                        <div>
                            <input type="image" src="{{context}}/static/assets/google/normal.png" style="height:48px;" data-value="google-drive" plan-id="{{plan.id}}"/>
                            <div class="signup-button" data-value="dropbox" plan-id="{{plan.id}}">
                                <img src="{{context}}/static/img/accounts/dropbox.png">
                                <span>Dropbox</span>
                            </div>
                            <div class="less">
                                <span class="active" onclick="$('.less').slideUp('fast', function(){$('.more').slideDown()})"><i class="fa fa-chevron-down"></i></span>
                            </div>    
                        </div>

                        <div class="more">
                           
                            <p>
                                <div class="border-left border-bottom signup-button" data-value="one-drive" plan-id="{{plan.id}}">
                                    <img src="{{context}}/static/img/accounts/microsoft.png"> <span>One Drive</span>
                                </div>
                                <div class="border-left border-bottom signup-button" data-value="box" plan-id="{{plan.id}}" align="center">
                                    <img src="{{context}}/static/img/accounts/box.png"> <span>Signin</span>
                                </div> 
                            </p>
                        </div>
                   
                    
                    </div>                
            </p>

        </div>
        <div class="dialog">
            <br>
            <div style="display:grid; grid-template-columns:80px auto; gap:2px; grid-gap:2px; align-items:center; ">
                <div id="icon" align="center">
                    <i class="fas fa-cog fa-spin" style="color:darkgray; font-size:48px"></i>
                    <i class="fas fa-cog fa-spin" style="color:#4682B4; font-size:26px; margin-left:-10px;"></i>
                </div>
                <div id="message">
                    Redirecting
                </div>
            </div>
        </div>
    </div>
   
<!--     
<div class="border-round {{theme}}">
    <div class="border-bottom" align="right" style="padding:4px;">
        <span class="active" onclick="jx.modal.close()">
            <i class="fa fa-times fa-2x"></i>
        </span>
    </div>
    <p></p>
    <div class="pane " >

        <div class=" border-right">
               <div class="title">

                    <div>
                        <i class="fa fa-check fa-2x"></i>
                    </div>
                    <div>
                        <div class="caption">{{label}}</div>
                        <div class="default bold" style="text-transform:capitalize">
                           
                            <span class="">{{plan.nickname}} Plan, </span>
                        
                            <span class="bold ">{{plan.amount / 100}} </span> / <span style="text-transform: lowercase; font-weight:lighter">{{plan.interval}}</span>
                        </div>
                    </div>
               </div>
            <p>
                <div class="plan border-none " >
        
                {% for key,value in plan.metadata.features.items() %}
                    <div class="feature">
                        <div class="label">
                            {{key}}
                        </div>
                        <div class="status">
                        {% if value == 1%}
                            <i class="fa fa-check"></i>
                        {% elif value == 0%}
                            <i class="fa fa-times"></i>
                        {% else %}
                            {{ value}}
                        {% endif %}
                        </div>
                    </div>
                {% endfor%}
                </div>
            </p>
        </div>
        <div class="" >
            
                <div class="medium-caption" align="center">Signup using a cloud account</div>

            
            <p>
                <div align="center" style="display:grid; align-content:center; justify-content:center" >
                    <input type="image" src="{{context}}/static/assets/google/normal.png" style="height:48px;" data-value="google-drive" plan-id="{{plan.id}}"/>
                    <div class="signup-button" data-value="dropbox" plan-id="{{plan.id}}">
                        <img src="{{context}}/static/img/accounts/dropbox.png">
                        <span>Dropbox</span>
                    </div>
                    <div class="border-left border-bottom signup-button" data-value="one-drive" plan-id="{{plan.id}}">
                        <img src="{{context}}/static/img/accounts/microsoft.png"> <span>One Drive</span>
                    </div>
                    <div class="border-left border-bottom signup-button" data-value="box" plan-id="{{plan.id}}">
                        <img src="{{context}}/static/img/accounts/box.png"> <span>Signin with box</span>
                    </div>                    
                
                </div>
            </p>
        </div>
        
</div>
    
</div> -->

</body> 