{% extends "template.html" %}
{% block extrahead %}
<link rel="stylesheet" type="text/css" href="/static/apps/ip/ipam/css/vrf_index.css" />
<link rel="stylesheet" type="text/css" href="/media/css/forms.css" />
{% endblock %}
{% load tags %}
{% block content %}
<!-- toolbar -->
{% if can_change %}
    <ul class="object-tools">
        {% if can_ping %}
            <li><a href="#" onclick="toggle_pingtest();" id="pingtest">Start Ping</a></li>
        {%endif%}
        {% if user.is_superuser %}
            <li><a href="{% url ip:tools:index prefix.vrf.id prefix.afi prefix.prefix %}" class="changelink">Tools</a></li>
        {% endif %}
        {% if can_add_prefix %}
            <li><a href="{% url ip:ipam:add_prefix prefix.vrf.id prefix.afi prefix.prefix %}" class="addlink">Add Prefix</a></li>
        {% endif %}
        {% if can_add_address %}
            <li><a href="{% url ip:ipam:add_address prefix.vrf.id prefix.afi prefix.prefix %}" class="addlink">Add Address</a></li>
        {% endif %}
    </ul>
{% endif %}
<!-- end toolbar -->

{% if styles %}
<!-- custom styles -->
<style>
    {{styles|safe}}
</style>
<!-- end custom styles -->
{% endif %}
<script type="text/javascript">
/* Jump to selected bookmark */
function on_mynetworks(n)
{
    document.location=n.options[n.selectedIndex].value;
}
</script>
<!-- Navigation -->
<div class="module">
    <table width="100%">
        <caption>Navigation</caption>
        <tr>
            <td>
                <!-- path -->
                <a href="{% url ip:ipam:index %}">VRF: {{vrf.name}}<a/> &#x203a;
                <a href="{% url ip:ipam:index %}">IPv{{afi}}</a> &#x203a;
                {% for p in path %}
                    <a href="{% url ip:ipam:vrf_index p.vrf.id p.afi p.prefix %}" title="{{p.short_description}}">{{p.prefix}}</a> &#x203a;
                {% endfor %}
            </td>
            <td class="nav-label">
                Quick Jump:
            </td>
            <td class="nav-form">
                <form method="POST" action="{% url ip:ipam:quickjump vrf.id afi %}">{% csrf_token %}
                    <input type="search" name="jump" placeholder="Quick Jump..." />
                </form>
            </td>
        </tr>
        <tr>
            <td style="font-size: 18px; font-weight: bold; color: #666;vertical-align: bottom;">
                {{prefix.prefix}}
            </td>
            <td class="nav-label">
                My Networks:
            </td>
            <td class="nav-form">
                <form>
                    <select onchange="return on_mynetworks(this);">
                        <option>---</option>
                        {% for p in bookmarks %}
                            <option value="../../../../{{p.vrf.id}}/{{p.afi}}/{{p.prefix}}/"{% if p.prefix == prefix.prefix%}selected{%endif%}>{{p.prefix}} {{p.short_description}}</option>
                        {% endfor %}
                    </select>
                </form>
            </td>
        </tr>
        <tr>
            <td style="font-size: 18px" {% if prefix.style %}class="{{prefix.style.css_class_name}}"{%endif%}>{{prefix.short_description}}</td>
            <td></td>
            <td>
                {% if has_bookmark %}
                    <a class="deletelink" href="{% url ip:ipam:toggle_bookmark prefix.vrf.id prefix.afi prefix.prefix %}">Remove bookmark</a>
                {%else%}
                    <a class="addlink" href="{% url ip:ipam:toggle_bookmark prefix.vrf.id prefix.afi prefix.prefix %}">Add bookmark</a>
                {% endif %}
            </td>
        </td>
    </table>
</div>
<!-- end Navigation -->
<!-- long description -->
{% if long_description %}
    <div class="module">
        <table width="100%">
            <caption>Description</caption>
            <tr><td><pre>{{long_description}}</pre></td></tr>
        </table>
    </div>
{% endif %}
<!-- end long description -->
<!-- empty block message -->
{% if display_empty_message %}
    <div class="module">
        <p><b>WARNING!!!</b><br/><i>This prefix is empty! Please add nested prefixes or addresses.</i></p>
    </div>
{% endif %}
<!-- end of empty block message -->
<!-- prefixes -->
{% if prefixes %}
    <style>
    .free-prefix {
        background-color: #ccc;
        font-style: italic;
    }
    </style>
    <script type="text/javascript">
    p_free_shown=false;
    function toggle_free_prefixes() {
        if(p_free_shown) {
            $(".free-prefix").hide();
            $("#toggle-free-prefixes-link").text("Show free prefixes");
            p_free_shown=false;
        } else {
            $(".free-prefix").show();
            $("#toggle-free-prefixes-link").text("Hide free prefixes");
            p_free_shown=true;
        }
        return false;
    }
    </script>
    <div class="module">
        <table width="100%">
            <caption>Allocated Prefixes <a style="float:right" onclick="toggle_free_prefixes()" href="#" id="toggle-free-prefixes-link">Show free prefixes<a/></caption>
            <thead>
                <tr>
                    <th class="ip">Prefix</th>
                    <th class="vc">VC</th>
                    <th class"description">Description</th>
                    <th class="tt">TT</th>
                    <th>Tags</th>
                </tr>
            </thead>
            <tr style="display:none" id="at-p-start"></tr>
            {% for f, pp, p  in l_prefixes %}
                {% if f %}
                    <tr class="{% if p.style %}{{p.style.css_class_name}}{% else %}{% cycle 'row1' 'row2' %}{% endif %}">
                        <td><a href="{% url ip:ipam:vrf_index p.vrf.id p.afi p.prefix %}">{{p.prefix}}</a></td>
                        <td>{% if p.vc %}{{p.vc}}{% endif %}</td>
                        <td>{{p.short_description}}</td>
                        <td>{% if p.tt %}{{p.tt}}{% endif %}</td>
                        <td>{% tags p %}</td>
                    </tr>
                {% else %}
                    <tr class='free-prefix' style='display:none'>
                        <td>
                            {% if can_add_prefix %}
                                <a href="add_prefix/?prefix={{pp.prefix}}">{{pp}}</a>
                            {% else %}
                                {{pp}}
                            {% endif %}
                        </td>
                        <td colspan="4">Free...</td>
                    </tr>
                {% endif %}
            {% endfor %}
        </table>
    </div>
{% endif %}
<!-- end prefixes -->
<!-- addresses -->
{% if addresses %}
    <style>
    .noc-r-none {
        background-color: 0xffffff;
    }
    
    .noc-ri-none {
        border-left-width: 5px;
        border-left-style: none;
        width: 0px;
        padding: 0px;
    }
    {% for r in ranges %}
        .noc-r-{{r.id}} {
            background-color: {{r.color}};
        }
        
        .noc-ri-{{r.id}} {
            border-left-width: 5px;
            border-left-style: solid;
            border-left-color: {{r.color}};
            width: 0px;
            padding: 0px;
        }
    {% endfor %}
    </style>
    {% if spot %}
        <style>
        .free-address {
            background-color: #ccc;
        }
        
        .free-address-sep {
            background-color: #ccc;
        }        
        </style>
        <script type="text/javascript">
            SPOT={{spot|safe}};
            spotted=false;
            free_shown=false;
            
            function install_spotted() {
                if(spotted)
                    return;
                
                var addresses=$.map($("#addresses .used-address"),function(v) {return v;});
                var $ce=addresses.shift();
                var ca=$(".address a",$ce).html(); /* Current address */
                var $cp=$("#at-start"); /* Current insertion point */
                
                /* Walk through all spotted addresses */
                $.each(SPOT,function(index,spot){
                    var value=spot[0];
                    var slots=spot[1];
                    if(value==ca) {
                        /* Get next address */
                        $cp=$($ce);
                        $ce=addresses.shift();
                        ca=$(".address a",$ce).html();
                    } else {
                        /* Calculate range slots */
                        var s="";
                        for(i=0;i<slots.length;i++) {
                            var v=slots[i];
                            if(v==null)
                                v="none"
                            s+="<td class='noc-ri-"+v+"'></td"
                        }
                        /* Insert row */
                        var $v;
                        if(value)
                            $v=$("<tr class='free-address' style='display:none'>"+s+"<td><img id='s_"+value+"'  class='s_img' src='/static/img/blank_1x1.png'/></td><td><a href='{% url ip:ipam:add_address vrf.id afi prefix.prefix %}?address="+value+"' title='click to add new address'>"+value+"</a></td><td colspan='7'>Free...</td></tr>");
                        else
                            $v=$("<tr class='free-address-sep' style='display:none'>"+s+"<td></td><td colspan='8'>...</td></tr>");
                        $v.insertAfter($cp);
                        $cp=$v;
                    }
                });
                spotted=true;
            }
            
            function toggle_free() {
                install_spotted();
                if(free_shown) {
                    $(".free-address").hide();
                    $(".free-address-sep").hide();
                    $("#toggle-free-link").text("Show free addresses");
                    free_shown=false;
                } else {
                    $(".free-address").show();
                    $(".free-address-sep").show();
                    $("#toggle-free-link").text("Hide free addresses");
                    free_shown=true;
                }
                return false;
            }
            
            var _in_pingtest=false;
            var _ping_task_id=0;

            function toggle_pingtest() {
                if(_in_pingtest) {
                    $("#pingtest").text("Start Ping");
                } else {
                    $("#pingtest").text("Stop Ping");
                }
                _in_pingtest=!_in_pingtest;
                if(_in_pingtest) {
                    install_spotted();
                    run_pingtest();
                }
            }

            function display_ping_result(result) {
                var src;
                var ip;
                $(".s_img").each(function(i){
                    ip=$(this).attr("id").substring(2);
                    if ((ip in result) && result[ip])
                        src="/media/img/admin/icon-yes.gif";
                    else
                        src="/media/img/admin/icon-no.gif";
                    $(this).attr("src",src);
                })
            }

            function check_ping_task() {
                if(!_in_pingtest) 
                    return;
                $.get("{% url ip:ipam:ping_check vrf.id afi prefix.prefix %}"+_ping_task_id+"/",function(data,status,request) {
                    if(data==null) {
                        if(_in_pingtest)
                            setTimeout(check_ping_task,5000);
                    } else {
                        _ping_task_id=0;
                        display_ping_result(data);
                        if(_in_pingtest)
                            setTimeout(run_pingtest,60000);
                    }
                });
            }

            function run_pingtest() {
                $.get("{% url ip:ipam:ping_check vrf.id afi prefix.prefix %}",function(data,status,request){
                    _ping_task_id=data;
                    $.get("{% url ip:ipam:ping_check vrf.id afi prefix.prefix %}"+_ping_task_id+"/",check_ping_task);
                });
            }
        </script>
    {% endif %}
    <div class="module">
        <table width="100%" id="addresses">
            <caption>Assigned Addresses{% if spot %}<a style="float:right" onclick="toggle_free()" href="#" id="toggle-free-link">Show free addresses<a/>{% endif %}</caption>
            <thead>
                <tr>
                    {% if max_slots %}<th colspan="{{max_slots}}" style="width: 0px"></th>{%endif%}
                    <th class="status">Up</th>
                    <th class="ip">Address</th>
                    <th class="fqdn">FQDN</th>
                    <th class="mac">MAC</th>
                    <th class="managed-object">Managed Object</th>
                    <th class="gw" title="Address belongs to router interface">GW</th>
                    <th>Description</th>
                    <th class="tt">TT</th>
                    <th>Tags</th>
                </tr>
            </thead>
            <tr style="display:none" id="at-start"></tr>
            {% for a in addresses %}
                <tr class="used-address {% if a.style %}{{a.style.css_class_name}}{% else %}{% cycle 'row1' 'row2' %}{% endif %}">
                    {% if max_slots %}
                        {% for r in a.slots %}
                            <td class="noc-ri-{% if r %}{{r.id}}{% else %}none{% endif %}"></td>
                        {% endfor %}
                    {% endif %}
                    <td><img id="s_{{a.address}}" class="s_img" src="/static/img/blank_1x1.png"/></td>
                    <td class="address">
                        {% if can_change %}
                            <a href="{% url ip:ipam:change_address vrf.id afi a.address %}">{{a.address}}</a>
                        {%else%}
                            {{a.address}}
                        {%endif%}
                    </td>
                    <td>{{a.fqdn}}</td>
                    <td>{% if a.mac %}{{a.mac}}{% endif %}</td>
                    <td>{% if a.managed_object %}{{a.managed_object.name}}{% endif %}</td>
                    <td>{% if a.managed_object and a.managed_object.is_router %}<img src="/media/img/admin/icon-yes.gif" title="yes" />{% endif %}</td>
                    <td >{{a.short_description}}</td>
                    <td>{%if a.tt %}#{{a.tt}}{%endif%}</td>
                    <td>{% tags a %}</td>
                </tr>
            {% endfor %}
        </table>
    </div>
    
    <!-- Ranges -->
    {% if  ranges %}
        <div class="module">
            <table width="100%" id="ranges">
                <caption>Address Ranges</caption>
                <thead>
                    <tr>
                        <th class="legend"></th>
                        <th class="name">Name</th>
                        <th class="address">From Address</th>
                        <th class="address">To Address</th>
                        <th>Description</th></tr>
                </thead>
                {% for r in ranges %}
                    <tr class="{% cycle 'row1' 'row2' %}">
                        <td class="noc-r-{{r.id}}"></td>
                        <td>{{r.name}}</td>
                        <td>{{r.from_address}}</td>
                        <td>{{r.to_address}}</td>
                        <td>{{r.short_description}}</td>
                    </tr>
                {% endfor %}
            </table>
        </div>
    {% endif %}
    <!-- End ranges -->
{% endif %}
<!-- end addresses -->
<!-- block info -->
<div class="module">
    <table width="100%">
        <caption>{{prefix.prefix}} Info</caption>
        {% if prefix.tags %}
            <tr class="row2"><td><b>Tags</b></td><td>{% tags prefix %}</td></tr>
        {% endif %}
        <!-- VC -->
        <tr class="row1">
            <td><b>VC</b></td>
            <td>{% if prefix.vc %}{{prefix.vc}}{% endif %}</td>
        </tr>
        <!-- End VC -->
        <tr class="row2">
            <td><b>Maintainers</b></td>
            <td>{{prefix.maintainers|join:", "}} {%if can_change_maintainers %}<a href="{% url ip:prefixaccess:add %}?vrf={{vrf.id}}&afi={{prefix.afi}}&prefix={{prefix.prefix}}" class="changelink">Change...</a>{%endif%}</td>
        </tr>
        {% for k,v in prefix_info %}
            <tr class="{%cycle 'row1' 'row2'%}"><td style="width: 10pt"><b>{{k}}</b></td><td>{{v}}</td></tr>
        {% endfor %}
    </table>
</div>
<!-- end block info -->
<!-- Toolbar -->
{% if can_change %}
    <div class="submit-row">
        <a href="{% url ip:ipam:change_prefix vrf.id afi prefix.prefix %}" class="changelink">Change</a>
        {% if prefix.parent %}
            <a href="{% url ip:ipam:delete_prefix vrf.id afi prefix.prefix %}" class="deletelink" style="float: left">Delete</a>
        {% endif %}
    </div>
{% endif %}
<!-- end Toolbar -->
{% endblock %}