1[% IF orphans.size > 0 %]
2<div class="accordion" id="accordion-orphans">
3  <div class="accordion-group">
4      <div class="accordion-heading">
5          <a class="accordion-toggle" data-toggle="collapse" data-target="#collapse-orphan" href="#collapse-orphan">
6            <i class="icon-chevron-up"></i> &nbsp;
7            Orphaned Devices
8          </a>
9      </div>
10    <div id="collapse-orphan" class="accordion-body collapse">
11      <div class="accordion-inner">
12      <table class="table table-bordered table-condensed">
13        <thead>
14          <tr>
15            <th>Device</th>
16            <th>Location</th>
17            <th>Contact</th>
18            <th>Vendor</th>
19            <th>Model</th>
20          </tr>
21        </thead>
22        <tbody>
23          [% FOREACH row IN orphans %]
24          <tr>
25            <td><a href="[% uri_for('/device') | none %]?q=[% row.ip | uri %]">
26            [% row.dns || row.name || row.ip | html_entity %]</a></td>
27            <td>
28              [% IF row.location %]
29                <a href="[% search_device | none %]&q=[% row.location | uri %]&location=[% row.location | uri %]">
30                 [% row.location | html_entity %]</a>
31              [% ELSE %]
32                [Not Set]
33              [% END %]
34            </td>
35            <td>[% row.contact | html_entity %]</td>
36            <td>[% row.vendor | html_entity %]</td>
37            <td>[% row.model | html_entity %]</td>
38          </tr>
39          [%END%]
40        </tbody>
41      </table>
42    </div>
43  </div>
44  </div>
45</div>
46[% END %]
47[%# The largest graph is considered the main network, all others are
48    considered orphaned, so we need two to generate div %]
49[% IF graphs.size > 1 %]
50<div class="accordion" id="accordion-networks">
51[% count = 0 %]
52[% FOREACH network IN graphs %]
53  [% count = count + 1 %]
54  [%# The largest is not an orphan, so skip %]
55  [% NEXT IF count == 1 %]
56  <div class="accordion-group">
57      <div class="accordion-heading">
58          <a class="accordion-toggle" data-toggle="collapse" data-target="#collapse-[% count | html_entity %]" href="#collapse-[% count | html_entity %]">
59            <i class="icon-chevron-up"></i> &nbsp;
60              Orphaned Network: [% count - 1 | html_entity  %] Size: [% network.size | html_entity  %] Devices
61          </a>
62      </div>
63    <div id="collapse-[% count | html_entity %]" class="accordion-body collapse">
64      <div class="accordion-inner">
65      <table class="table table-bordered table-condensed">
66        <thead>
67          <tr>
68            <th>Device</th>
69            <th>Location</th>
70            <th>Contact</th>
71            <th>Vendor</th>
72            <th>Model</th>
73          </tr>
74        </thead>
75        <tbody>
76        [% FOREACH row IN network %]
77          <tr>
78            <td><a href="[% uri_for('/device') | none %]?tab=netmap&q=[% row.ip | uri %]&firstsearch=on">
79            [% row.dns || row.name || row.ip | html_entity %]</a></td>
80            <td>
81              [% IF row.location %]
82                <a href="[% search_device | none %]&q=[% row.location | uri %]&location=[% row.location | uri %]">
83                 [% row.location | html_entity %]</a>
84              [% ELSE %]
85                [Not Set]
86              [% END %]
87            </td>
88            <td>[% row.contact | html_entity %]</td>
89            <td>[% row.vendor | html_entity %]</td>
90            <td>[% row.model | html_entity %]</td>
91          </tr>
92        [% END %]
93        </tbody>
94      </table>
95    </div>
96  </div>
97  </div>
98[% END %]
99</div>
100[% END %]
101<script>
102$('.accordion').on('show hide', function (n) {
103    $(n.target).siblings('.accordion-heading').find('.accordion-toggle i').toggleClass('icon-chevron-up icon-chevron-down');
104});
105</script>
106