extends layout

block headContent
	title Tools

block content
	h1.h3 Tools
	hr

	div.card.shadow-sm.mb-huge
		div.card-body
			- var priorityList = config.site.prioritizedToolIdsList;
			- var indexLists1Col = utils.splitArrayIntoChunksByChunkCount(priorityList, 1);
			- var indexLists2Col = utils.splitArrayIntoChunksByChunkCount(priorityList, 2);
			- var indexLists3Col = utils.splitArrayIntoChunksByChunkCount(priorityList, 3);

			// xs
			div.d-block.d-sm-none(id="tools-1-col")
				div.row
					each indexList in indexLists1Col
						div.col
							ul.list-unstyled.mb-0
								each toolsItemIndex in indexList
									- var item = config.siteTools[toolsItemIndex];
									
									div.clearfix
										div.float-left.pt-1(style="width: 38px;")
											i.fa-lg(class=item.fontawesome, style="width: 20px; margin-right: 10px;")

										div.float-left
											div.lead
												a(href=item.url) #{item.name}

									div(style="padding-left: 39px;")
										p #{item.desc}

			// sm, md, lg
			div.d-none.d-sm-block.d-xl-none(id="tools-2-col")
				div.row
					each indexList in indexLists2Col
						div.col
							ul.list-unstyled.mb-0
								each toolsItemIndex in indexList
									- var item = config.siteTools[toolsItemIndex];
									
									div.clearfix
										div.float-left.pt-1(style="width: 38px;")
											i.fa-lg(class=item.fontawesome, style="width: 20px; margin-right: 10px;")

										div.float-left
											div.lead
												a(href=item.url) #{item.name}

									div(style="padding-left: 39px;")
										p #{item.desc}

			// xl, xxl
			div.d-none.d-xl-block(id="tools-3-col")
				div.row
					each indexList in indexLists3Col
						div.col
							ul.list-unstyled.mb-0
								each toolsItemIndex in indexList
									- var item = config.siteTools[toolsItemIndex];
									
									div.clearfix
										div.float-left.pt-1(style="width: 38px;")
											i.fa-lg(class=item.fontawesome, style="width: 20px; margin-right: 10px;")

										div.float-left
											div.lead
												a(href=item.url) #{item.name}

									div(style="padding-left: 39px;")
										p #{item.desc}