Files
RoleForge/app/templates/roles.xhtml
Sergey Antropoff 1d2301fb09 first commit
2026-04-30 08:59:31 +03:00

63 lines
2.7 KiB
HTML

{% extends "base.xhtml" %}
{% from "macros/page-hero.xhtml" import page_hero %}
{% block content %}
<div class="dashboard-page roles-page">
{% call page_hero("Library", "Roles", "Browse your Ansible role catalog with descriptions and quickly attach roles to playbooks.") %}
<div class="dashboard-hero-actions dashboard-hero-actions--roles">
<button type="button" class="cta-button cta-button--secondary" id="roles-import-open-btn">Import</button>
<a href="/roles/create" class="cta-button">Create Role</a>
</div>
{% endcall %}
<section class="dashboard-panel dashboard-panel--primary">
<div class="dashboard-panel-h">
<div>
<h2 class="dashboard-panel-title">Roles</h2>
<p class="dashboard-panel-sub">Each role includes a description and can be added to an existing playbook.</p>
</div>
</div>
<div class="roles-toolbar roles-toolbar--top">
<div class="roles-filter-card roles-filter-card--search">
<label for="roles-search-input">Search Roles</label>
<input id="roles-search-input" type="text" placeholder="Search by name, description, source..." />
</div>
<div class="roles-toolbar-filters-right">
<div class="roles-filter-card roles-filter-card--category">
<label for="roles-category-filter">Category</label>
<select id="roles-category-filter">
<option value="">All categories</option>
</select>
</div>
<div class="roles-filter-card roles-filter-card--visibility">
<label for="roles-visibility-filter">Visibility</label>
<select id="roles-visibility-filter">
<option value="">All</option>
<option value="public">Public</option>
<option value="team">Team</option>
<option value="personal">Personal</option>
</select>
</div>
</div>
</div>
<div id="roles-list" class="roles-list"></div>
<div class="roles-toolbar roles-toolbar--bottom">
<div class="roles-filter-card roles-filter-card--page-size">
<label for="roles-page-size">Cards per page</label>
<select id="roles-page-size">
<option value="6">6</option>
<option value="9">9</option>
<option value="12" selected="selected">12</option>
<option value="18">18</option>
<option value="24">24</option>
</select>
</div>
<div class="roles-pagination">
<button type="button" class="btn-muted" id="roles-prev-page-btn">Previous</button>
<span id="roles-page-info" class="muted">Page 1 of 1</span>
<button type="button" class="btn-muted" id="roles-next-page-btn">Next</button>
</div>
</div>
</section>
</div>
{% endblock %}