{% load i18n %}

<div id="networks" class="separator"></div>

<div id="networks-container">
    <!-- the create button -->
    <div id="networks-createcontainer">
        <a id="networkscreate" rel="#networkswizard" href="#">{% trans "Create New +" %}</a>
    </div>
    <div class="network" id="internet-template">
        <div class="actions">
            <a href="#" class="action-network-add">{% trans "Add Machine" %}</a>
        </div>    
        <div class="state">
            <div class="status">{% trans "Public Network" %}</div>
            <div class="indicator"></div>
            <div class="indicator"></div>
            <div class="indicator"></div>
            <div class="indicator"></div>
        </div>    
        <img class="network-logos" src="/static/internet.png" />
        <div href="#" class="name-div">
            <h5 class="namecontainer">
                <span class="name">{% trans "Internet" %}</span>
            </h5>
        </div>
        <h5 class="network-machines">
            {% trans "Show:" %} <span class="show-machines">{% trans "machines" %} (2)</span>
        </h5>
        <div class="network-contents">
            <div class="network-placeholder">
                <div class="network-contents-start-separator"></div>
                <div class="network-machine" id="machine-template">
                    <div class="machine-actions">
                        <a href="#" class="action-disconnect">{% trans "Disconnect" %}</a>
                        <a href="#" class="action-details">{% trans "Details" %}</a>
                    </div>        
                    <div class="state">
                        <div class="status"><span class="discreet">IPv4:</span> 192.94.73.15</div>
                        <div class="status"><span class="discreet">IPv6:</span> vv</div>
                        <img class="spinner" style="display:none" src="/static/progress.gif" />
                        <img class="wave" style="display:none" src="/static/wave.gif" />
                    </div>
                    <img class="logo" src="/static/machines/debian-on.png" />
                    <div class='network-remove-machine'><span class="remove-icon">X</span></div>     
                    <div href="#" class="machine-name-div">
                        <h5 class="namecontainer editable">
                            <span class="name">my desktop1</span><span class="rename"></span>
                            <div class="editbuttons" style="display:none">
                                <span class="save" />
                                <span class="cancel" />
                            </div>
                        </h5>
                    </div>
                    <h5>
                        <span class="ip">{% trans "IPs" %}</span> | 
                        <span class="show-firewall">{% trans "Firewall" %}</span> 
                        (<span class="firewall-on">{% trans "On" %}</span>)   
                    </h5>
                    <div class="firewall-content">
                        <div class="firewall-contents-start-separator"></div>
                        <input type="radio" class="checkboxes" name="image-id1" /> 
                        <span class="checkbox-legends">{% trans "Unprotected mode (Firewall off)" %}</span>
                        <br />
                        <input type="radio" class="checkboxes" name="image-id1" /> 
                        <span class="checkbox-legends">{% trans "Fully protected mode (Firewall on)" %}</span>
                        <br />
                        <input type="radio" class="checkboxes" name="image-id1" /> 
                        <span class="checkbox-legends">{% trans "Basically protected mode (Firewall on)" %}</span>
                        <br />
                        <input type="radio" class="checkboxes" name="image-id1" /> 
                        <span class="checkbox-legends">{% trans "Custom protection" %} <a href="#" class="firewall-settings">{% trans "settings" %}</a> {% trans "(Advanced users only)" %}</span>
                        <button type="submit" class="firewall-apply">{% trans "Apply" %}</button>
                        <div class="firewall-contents-end-separator"></div>
                    </div>
                </div>
                <div class="network-separator machines"></div>
                <div class="network-machine" id="machine-template">
                    <div class="machine-actions">
                        <a href="#" class="action-disconnect">{% trans "Disconnect" %}</a>
                        <a href="#" class="action-details">{% trans "Details" %}</a>
                    </div>        
                    <div class="state">
                        <div class="status"><span class="discreet">IPv4:</span> 192.94.73.18</div>
                        <div class="status"><span class="discreet">IPv6:</span> vv</div>
                        <img class="spinner" style="display:none" src="/static/progress.gif" />
                        <img class="wave" style="display:none" src="/static/wave.gif" />
                    </div>
                    <img class="logo" src="/static/machines/windows-off.png" />
                    <div class='network-remove-machine'><span class="remove-icon">X</span></div>
                    <div href="#" class="machine-name-div">
                        <h5 class="namecontainer editable">
                            <span class="name">my desktop1</span><span class="rename"></span>
                            <div class="editbuttons" style="display:none">
                                <span class="save" />
                                <span class="cancel" />
                            </div>
                        </h5>
                    </div>
                    <h5>
                        <span class="ip">{% trans "IPs" %}</span> | 
                        <span class="show-firewall" href="#">{% trans "Firewall" %}</span> 
                        (<span class="firewall-off">{% trans "Off" %}</span>)   
                    </h5>  
                    <div class="firewall-content">
                        <div class="firewall-contents-start-separator"></div>
                        <input type="radio" class="checkboxes" name="image-id2" /> 
                        <span class="checkbox-legends">{% trans "Unprotected mode (Firewall off)" %}</span>
                        <br />
                        <input type="radio" class="checkboxes" name="image-id2" /> 
                        <span class="checkbox-legends">{% trans "Fully protected mode (Firewall on)" %}</span>
                        <br />
                        <input type="radio" class="checkboxes" name="image-id2" /> 
                        <span class="checkbox-legends">{% trans "Basically protected mode (Firewall on)" %}</span>
                        <br />
                        <input type="radio" class="checkboxes" name="image-id2" /> 
                        <span class="checkbox-legends">{% trans "Custom protection" %} <a href="#" class="firewall-settings">{% trans "settings" %}</a> {% trans "(Advanced users only)" %}</span>
                        <button type="submit" class="firewall-apply">{% trans "Apply" %}</button>
                        <div class="firewall-contents-end-separator"></div>
                    </div>
                </div>
                <div class="network-separator machines"></div>
                <div class="empty-network-slot" id="machine-template">
                    <div class='network-add-machine'><span class="add-icon">+</span></div>
                </div>
            </div>
            <div class="network-contents-end-separator"></div>
        </div>
    </div>
    <div id="internet-separator"></div>
    <div id="private-networks">
        <div class="network" id="network-template">
            <div class="actions">
                <a href="#" class="action-add">{% trans "Add Machine" %}</a>
                <a href="#" class="action-network-edit">{% trans "Edit" %}</a>
                <a href="#" class="action-network-destroy">{% trans "Destroy" %}</a>
            </div>    
            <div class="state">
                <div class="status">{% trans "Private Network" %}</div>
                <div class="indicator"></div>
                <div class="indicator"></div>
                <div class="indicator"></div>
                <div class="indicator"></div>
            </div>    
            <img class="network-logos" src="/static/network.png" />
            <div href="#" class="name-div">
                <h5 class="namecontainer">
                    <span class="name">{% trans "My Network 1" %}</span><span class="rename-network"></span>
                </h5>
            </div>
            <h5 class="network-machines">
                {% trans "Show:" %} <span class="show-machines">{% trans "machines" %} (2)</span>
            </h5>
            <div class="network-contents">
                <div class="network-placeholder">
                    <div class="network-contents-start-separator"></div>
                    <div class="network-machine" id="machine-template">
                        <div class="machine-actions">
                            <a href="#" class="action-disconnect">{% trans "Disconnect" %}</a>
                            <a href="#" class="action-details">{% trans "Details" %}</a>
                        </div>        
                        <div class="state">
                            <div class="status"><span class="discreet">IPv4:</span> 192.94.73.15</div>
                            <div class="status"><span class="discreet">IPv6:</span> vv</div>
                            <img class="spinner" style="display:none" src="/static/progress.gif" />
                            <img class="wave" style="display:none" src="/static/wave.gif" />
                        </div>
                        <img class="logo" src="/static/machines/debian-on.png" />
                        <div class='network-remove-machine'><span class="remove-icon">X</span></div>     
                        <div href="#" class="machine-name-div">
                            <h5 class="namecontainer editable">
                                <span class="name">my desktop1</span><span class="rename"></span>
                                <div class="editbuttons" style="display:none">
                                    <span class="save" />
                                    <span class="cancel" />
                                </div>
                            </h5>
                        </div>
                        <h5>
                            <span class="machine-connect">{% trans "Connect" %}</span> {% trans "to manage private IPs" %}
                        </h5>
                        <div class="firewall-content">
                            firewall content
                        </div>
                    </div>
                    <div class="network-separator machines"></div>
                    <div class="network-machine" id="machine-template">
                        <div class="machine-actions">
                            <a href="#" class="action-disconnect">{% trans "Disconnect" %}</a>
                            <a href="#" class="action-details">{% trans "Details" %}</a>
                        </div>        
                        <div class="state">
                            <div class="status"><span class="discreet">IPv4:</span> 192.94.73.18</div>
                            <div class="status"><span class="discreet">IPv6:</span> vv</div>
                            <img class="spinner" style="display:none" src="/static/progress.gif" />
                            <img class="wave" style="display:none" src="/static/wave.gif" />
                        </div>
                        <img class="logo" src="/static/machines/ubuntu-on.png" />
                        <div class='network-remove-machine'><span class="remove-icon">X</span></div>     
                        <div href="#" class="machine-name-div">
                            <h5 class="namecontainer editable">
                                <span class="name">my desktop1</span><span class="rename"></span>
                                <div class="editbuttons" style="display:none">
                                    <span class="save" />
                                    <span class="cancel" />
                                </div>
                            </h5>
                        </div>
                        <h5>
                            <span class="machine-connect">{% trans "Connect" %}</span> {% trans "to manage private IPs" %}
                        </h5>
                    </div>
                    <div class="network-separator machines"></div>
                    <div class="empty-network-slot" id="machine-template">
                        <div class='network-add-machine'><span class="add-icon">+</span></div>
                    </div>
                </div>
                <div class="network-contents-end-separator"></div>
            </div>
        </div>
        <div class="network-separator"></div>
        <div class="network" id="network-template">
            <div class="actions">
                <a href="#" class="action-add">{% trans "Add Machine" %}</a>
                <a href="#" class="action-network-edit">{% trans "Edit" %}</a>
                <a href="#" class="action-network-destroy">{% trans "Destroy" %}</a>
            </div>    
            <div class="state">
                <div class="status">{% trans "Private Network" %}</div>
                <div class="indicator"></div>
                <div class="indicator"></div>
                <div class="indicator"></div>
                <div class="indicator"></div>
            </div>    
            <img class="network-logos" src="/static/network.png" />
            <div href="#" class="name-div">
                <h5 class="namecontainer">
                    <span class="name">{% trans "My Network 2" %}</span><span class="rename-network"></span>
                </h5>
            </div>
            <h5 class="network-machines"> 
                {% trans "Show:" %} <span class="show-machines">{% trans "machines" %} (0)</span>
            </h5>
            <div class="network-contents">
                <div class="network-placeholder">
                    <div class="network-contents-start-separator"></div>
                    <div class="empty-network-slot" id="machine-template">
                        <div class='network-add-machine'><span class="add-icon">+</span></div>
                    </div>
                </div>
                <div class="network-contents-end-separator"></div>
            </div>
        </div>
        <div class="network-separator"></div>
        <div class="network" id="network-template">
            <div class="actions">
                <a href="#" class="action-add">{% trans "Add Machine" %}</a>
                <a href="#" class="action-network-edit">{% trans "Edit" %}</a>
                <a href="#" class="action-network-destroy">{% trans "Destroy" %}</a>
            </div>    
            <div class="state">
                <div class="status">{% trans "Private Network" %}</div>
                <div class="indicator"></div>
                <div class="indicator"></div>
                <div class="indicator"></div>
                <div class="indicator"></div>
            </div>    
            <img class="network-logos" src="/static/network.png" />
            <div href="#" class="name-div">
                <h5 class="namecontainer">
                    <span class="name">{% trans "My Network 3" %}</span><span class="rename-network"></span>
                </h5>
            </div>
            <h5 class="network-machines">
                {% trans "Show:" %} <span class="show-machines">{% trans "machines" %} (0)</span>
            </h5>
            <div class="network-contents">
                <div class="network-placeholder">
                    <div class="network-contents-start-separator"></div>
                    <div class="empty-network-slot" id="machine-template">
                        <div class='network-add-machine'><span class="add-icon">+</span></div>
                    </div>
                </div>
                <div class="network-contents-end-separator"></div>
            </div>
        </div>
    </div>
</div>
<div id="networks" class="separator"></div>

<script>
// hide the all of the networks contents
$(".network-contents").hide();
// toggle the component with class network-contents
$(".show-machines").click(function() {
    $(this).parent().next(".network-contents").slideToggle(600);
});
// toggle the component with class network-contents
$(".network-logos").click(function() {
    alert($(this).next(".network-contents"));
    $(this).next(".network-contents").slideToggle(600);
});

// intercept click to remove machine from network 
$(".remove-icon").click(function() {
    $(this).parent().parent().next('div.network-separator').fadeOut();
    $(this).parent().parent().fadeOut();
});

// intercept click to add machine to network
$(".add-icon").click(function() {
    //var newEntry = $(".network-machine")[0].clone();
    //$(this).parent().parent().append(newEntry);
});

// hide the all of the firewall contents
$(".firewall-content").hide();
// toggle the component with class firewall-contents
$(".show-firewall").click(function() {
    $(this).parent().next(".firewall-content").slideToggle(600);
});

//hide firewall content on apply click
$(".firewall-apply").click(function() {
    $(this).parent().slideToggle(600);
});
</script>