<%#
	Alpha os is made from me for all .. especially for indo wrt members and fan of OpenWrt or DBAI Community
	luci-theme-alpha
	Copyright 2024 derisamedia <facebook.com/derisamedia>
	Have a bug? Please create an issue here on GitHub!

	luci-theme-material
	Copyright 2015 Lutty Yang <lutty@wcan.in>

	luci-theme-bootstrap:
	Copyright 2008 Steven Barth <steven@midlink.org>
	Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
	Copyright 2012 David Menting <david@nut-bolt.nl>

	MUI:
	https://github.com/muicss/mui

	Licensed to the public under the Apache License 2.0
-%>
<% 
local ver = require "luci.version"
local uci = require "luci.model.uci".cursor()
local config = uci:get_all("alpha", "theme")

-- Table to store navbar icons
local icon = {}

-- Iterate through all navbar entries
uci:foreach("alpha", "navbar", function(section)
	local address = section.address
	local icon_url = section.icon

	if address and icon_url then
		-- Remove '/www/luci-static/alpha/' from icon_url
		icon_url = string.gsub(icon_url, "^/www/luci%-static/alpha/", "")
		icon[address] = icon_url
	end
end)

-- Check navbar enable status
local navbar_enabled = config.navbar == "1"

-- Calculate number of enabled navbar links
local num_links = 0
uci:foreach("alpha", "navbar", function(section)
	if section.enable == "Enable" then
		num_links = num_links + 1
	end
end)

-- Calculate link width for responsive design
local link_width = string.format("calc(100%% / %d)", num_links)

-- Retrieve theme properties
local background_color = config.color or '#2222359a'
local blur_value = tonumber(config.blur) or 20
local link_blur = string.format("blur(%dpx)", blur_value)
%>

<style>
.main > .main-left, .cbi-section, .cbi-section-error, #iptables, .Firewall form, #cbi-network > .cbi-section-node, #cbi-wireless > .cbi-section-node, #cbi-wireless > #wifi_assoclist_table, [data-tab-title], [data-page^="admin-system-admin"]:not(.node-main-login) .cbi-map:not(#cbi-dropbear), [data-page="admin-system-opkg"] #maincontent > .container, .tabs, .cbi-tabmenu, .cbi-tooltip {
	background-color: <%=background_color%>;
	backdrop-filter: <%=link_blur%>;
	-webkit-backdrop-filter: <%=link_blur%>;
}

@media screen and (max-width: 720px) {
	.navbar a {
		width: <%=link_width%>;
	}
}

<% if not navbar_enabled then %>
.navbar {
	display: none;
}
<% end %>
</style>

</div>
<footer class="mobile">
	<a href="https://github.com/derisamedia/luci-theme-alpha"><%=ver.luciname%> | Alpha OS Theme v3.9.5</a>
</footer>
</div>
<div class="navbar active">
	<% if navbar_enabled then %>
	<div class="dropdown">
		<% 
		uci:foreach("alpha", "navbar", function(section)
			local address = section.address
			local icon_url = icon[address] or 'default/icon.png'
			local target_blank = section.newtab == "Yes" and 'target="_blank"' or ''

			if section.enable == "Enable" then
		%>
			<a href="<%=address%>" <%=target_blank%>>
				<img src="<%=media%>/<%=icon_url%>" />
			</a>
		<% 
			end
		end)
		%>
	</div>
	<% end %>
	<label class="toggler">
		<img src="<%=media%>/gaya/icon/arrow.svg">
	</label>
</div>
<script>
{
	const nav = document.querySelector(".navbar");
	let lastScrollY = window.scrollY;
	window.addEventListener("scroll", () => {
		if (lastScrollY < window.scrollY) {
			nav.classList.add("navbar--hidden");
		} else {
			nav.classList.remove("navbar--hidden");
		}
		lastScrollY = window.scrollY;
	});
}
</script>
</div>
<script type="text/javascript">L.require('menu-alpha')</script>
<script src="<%=media%>/app.js"></script>
</body>
</html>
