Haketilo

#IF !ITEM_LIST_LOADED

#DEFINE ITEM_LIST_LOADED

<!--

    SPDX-License-Identifier: GPL-3.0-or-later OR CC-BY-SA-4.0

    Show a list of resources/mappings.

    This file is part of Haketilo.

    Copyright (C) 2022 Wojtek Kosior <koszko@koszko.org>

    File is dual-licensed. You can choose either GPLv3+, CC BY-SA or both.

    This program is free software: you can redistribute it and/or modify

    it under the terms of the GNU General Public License as published by

    the Free Software Foundation, either version 3 of the License, or

    (at your option) any later version.

    This program is distributed in the hope that it will be useful,

    but WITHOUT ANY WARRANTY; without even the implied warranty of

    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the

    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License

    along with this program.  If not, see <https://www.gnu.org/licenses/>.

    I, Wojtek Kosior, thereby promise not to sue for violation of this file's

    licenses. Although I request that you do not make use of this code in a

    proprietary program, I am not going to enforce this in court.

  -->

<!--

    This is not a standalone page. This file is meant to be imported into other

    HTML code.

  -->

#INCLUDE html/item_preview.html

#INCLUDE html/dialog.html

#LOADCSS html/reset.css

#LOADCSS html/base.css

#LOADCSS html/grid.css

<style>

  .item_list, .preview_scroll_box {

      overflow-y: auto;

      padding-top: 0.4em;

      height: calc(var(--content-height) - 0.4em);

  }

  .item_list {

      overflow-y: scroll;

      min-width: 7em;

  }

  .item_list>li {

      cursor: pointer;

      padding: 0.15em 0.3em;

  }

  .list_main_view {

      grid-template-columns: auto 1fr;

  }

  .item_li_highlight {

      background-color: #c0c0c0;

  }

  .item_list>li.item_li_highlight {

      cursor: default;

  }

  .item_list.list_disabled,

  .item_list.list_disabled *,

  .item_list.list_disabled .item_li_highlight {

      -moz-user-select: none;

      user-select: none;

      opacity: 0.75;

      cursor: not-allowed;

  }

  .list_buttons {

      margin: 1em auto;

      text-align: center;

  }

</style>

<template>

  <div id="item_list" data-template="main_div" class="grid_2 list_main_view">

    <ul data-template="ul" class="item_list"></ul>

    <div class="preview_scroll_box">

      <div data-template="preview_container"

	   class="hide item_preview_container">

	<!-- preview div will be dynamically inserted here -->

	<div class="list_buttons">

	  <button data-template="remove_but">Remove</button>

	  <!--<button data-template="export_but">Export</button>-->

	</div>

      </div>

      <div data-template="dialog_container" class="hide">

	<!-- dialog div will be dynamically inserted here -->

      </div>

    </div>

  </div>

</template>

#ENDIF