end
-%>
-<span>
- <ul style="margin:0; list-style-type:none; text-align:left">
+<div class="cbi-dropdown" dropdown-items="5" placeholder="<%:-- please select -- %>"<%=
+ attr("name", cbid) ..
+ ifattr(self.widget == "checkbox", "multiple", "multiple") ..
+ ifattr(self.rmempty or self.optional, "optional", "optional")
+%>>
+ <script type="item-template"><!--
+ <li value="{{value}}">
+ <span class="zonebadge" style="background:repeating-linear-gradient(45deg,rgba(204,204,204,0.5),rgba(204,204,204,0.5) 5px,rgba(255,255,255,0.5) 5px,rgba(255,255,255,0.5) 10px)">
+ <strong>{{value}}:</strong><em>(<%:create%>)</em>
+ </span>
+ </li>
+ --></script>
+ <ul>
<% if self.allowlocal then %>
- <li style="padding:0.5em">
- <input class="cbi-input-radio" data-update="click change"<%=attr("type", self.widget or "radio") .. attr("id", cbid .. "_empty") .. attr("name", cbid) .. attr("value", "") .. ifattr(checked[""], "checked", "checked")%> />  
- <label<%=attr("for", cbid .. "_empty")%>></label>
- <label<%=attr("for", cbid .. "_empty")%> style="background-color:<%=fwm.zone.get_color()%>" class="zonebadge">
+ <li value=""<%=ifattr(checked[""], "selected", "selected")%>>
+ <span style="background-color:<%=fwm.zone.get_color()%>" class="zonebadge">
<strong><%:Device%></strong>
- <% if self.allowany and self.allowlocal then %>(<%:input%>)<% end %>
- </label>
+ <% if self.allowany and self.allowlocal then -%>
+ (<%= self.alias ~= "dest"
+ and translate("output") or translate("input") %>)
+ <%- end %>
+ </span>
+ </li>
+ <% elseif self.widget ~= "checkbox" and (self.rmempty or self.optional) then %>
+ <li value=""<%=ifattr(checked[""], "selected", "selected")%>>
+ <span class="zonebadge">
+ <em><%:unspecified%></em>
+ </span>
</li>
<% end %>
<% if self.allowany then %>
- <li style="padding:0.5em">
- <input class="cbi-input-radio" data-update="click change"<%=attr("type", self.widget or "radio") .. attr("id", cbid .. "_any") .. attr("name", cbid) .. attr("value", "*") .. ifattr(checked["*"], "checked", "checked")%> />  
- <label<%=attr("for", cbid .. "_any")%>></label>
- <label<%=attr("for", cbid .. "_any")%> style="background-color:<%=fwm.zone.get_color()%>" class="zonebadge">
+ <li value="*"<%=ifattr(checked["*"], "selected", "selected")%>>
+ <span style="background-color:<%=fwm.zone.get_color()%>" class="zonebadge">
<strong><%:Any zone%></strong>
<% if self.allowany and self.allowlocal then %>(<%:forward%>)<% end %>
- </label>
+ </span>
</li>
<% end %>
<%
if zone:name() ~= self.exclude then
selected = selected or (value == zone:name())
%>
- <li style="padding:0.5em">
- <input class="cbi-input-radio" data-update="click change"<%=attr("type", self.widget or "radio") .. attr("id", cbid .. "." .. zone:name()) .. attr("name", cbid) .. attr("value", zone:name()) .. ifattr(checked[zone:name()], "checked", "checked")%> />  
- <label<%=attr("for", cbid .. "." .. zone:name())%>></label>
- <label<%=attr("for", cbid .. "." .. zone:name())%> style="background-color:<%=zone:get_color()%>" class="zonebadge">
+ <li<%=attr("value", zone:name()) .. ifattr(checked[zone:name()], "selected", "selected")%>>
+ <span style="background-color:<%=zone:get_color()%>" class="zonebadge">
<strong><%=zone:name()%>:</strong>
- <%
+ <%-
local zempty = true
for _, net in ipairs(zone:get_networks()) do
net = nwm:get_network(net)
if net then
zempty = false
- %>
+ -%>
<span class="ifacebadge<% if net:name() == self.network then %> ifacebadge-active<% end %>"><%=net:name()%>:
- <%
+ <%-
local nempty = true
for _, iface in ipairs(net:is_bridge() and net:get_interfaces() or { net:get_interface() }) do
nempty = false
%>
- <img<%=attr("title", iface:get_i18n())%> style="width:16px; height:16px; vertical-align:middle" src="<%=resource%>/icons/<%=iface:type()%><%=iface:is_up() and "" or "_disabled"%>.png" />
+ <img<%=attr("title", iface:get_i18n())%> src="<%=resource%>/icons/<%=iface:type()%><%=iface:is_up() and "" or "_disabled"%>.png" />
<% end %>
- <% if nempty then %><em><%:(empty)%></em><% end %>
+ <% if nempty then %><em><%:(empty)%></em><% end -%>
</span>
- <% end end %>
- <% if zempty then %><em><%:(empty)%></em><% end %>
- </label>
+ <%- end end -%>
+ <%- if zempty then %><em><%:(empty)%></em><% end -%>
+ </span>
</li>
<% end end %>
<% if self.widget ~= "checkbox" and not self.nocreate then %>
- <li style="padding:0.5em">
- <input class="cbi-input-radio" data-update="click change" type="radio"<%=attr("id", cbid .. "_new") .. attr("name", cbid) .. attr("value", "-") .. ifattr(not selected, "checked", "checked")%> />  
- <label<%=attr("for", cbid .. "_new")%>></label>
- <div onclick="document.getElementById('<%=cbid%>_new').checked=true" class="zonebadge" style="background-color:<%=fwm.zone.get_color()%>">
- <em><%:unspecified -or- create:%> </em>
- <input type="text"<%=attr("name", cbid .. ".newzone") .. ifattr(not selected, "value", luci.http.formvalue(cbid .. ".newzone") or self.default)%> onfocus="document.getElementById('<%=cbid%>_new').checked=true" />
- </div>
+ <li value="-">
+ <span class="zonebadge">
+ <em><%:create%>:</em>
+ <input type="password" style="display:none" />
+ <input class="create-item-input" type="text" />
+ </span>
</li>
<% end %>
</ul>
-</span>
+</div>
<%+cbi/valuefooter%>