{% extends 'core/base.html' %}

{% block title %}{{ org.name }} | Killian{% endblock %}

{% block content %}
<div class="breadcrumbs">
    <a href="{% url 'org_list' %}">Organizations</a>
    <span>/</span>
    <span>{{ org.name }}</span>
    <span>/</span>
    <strong>Overview</strong>
</div>

<div class="page-head organization-overview-head">
    <div>
        <div class="organization-overview-title-row">
            <h1>{{ org.name }}</h1>
            <span class="status-pill">{{ org.status }}</span>
        </div>
        <p>{{ org.notes|default:'Client documentation workspace' }}</p>
    </div>
    <div class="page-head-actions"></div>
</div>

{% if overview_cards %}
<div
    class="organization-metrics"
    style="--organization-metric-columns: {{ overview_metric_columns }};"
>
    {% for card in overview_cards %}
    <a class="metric-card metric-{{ card.color }}" href="{{ card.url }}">
        <b>{{ card.count }}</b>
        <span>{{ card.title }}</span>
    </a>
    {% endfor %}
</div>
{% endif %}

<div class="organization-dashboard-separator" aria-hidden="true"></div>

<div class="organization-dashboard-toolbar">
    <div>
        <h2>Quick Cards</h2>
    </div>
    <button
        type="button"
        class="organization-dashboard-add js-organization-dashboard-open"
        title="Choose quick cards"
        aria-label="Choose quick cards"
    >+</button>
</div>

{% if dashboard_widgets %}
<div class="organization-dashboard-grid">
    {% for widget in dashboard_widgets %}
    <section
        class="organization-dashboard-widget{% if widget.expanded %} is-expanded{% endif %}"
        data-dashboard-widget="{{ widget.module }}"
    >
        <div class="organization-dashboard-widget-head">
            <div>
                <h3>{{ widget.title }}</h3>
                <p>{{ widget.description }}</p>
            </div>
            <div class="organization-dashboard-widget-actions">
                <a href="{{ widget.module_url }}">View all</a>
                {% if widget.add_url %}
                <a href="{{ widget.add_url }}">+ Add</a>
                {% endif %}
            </div>
        </div>

        <div class="organization-dashboard-widget-body">
            {% for row in widget.rows %}
            <div class="organization-dashboard-widget-row">
                <div class="organization-dashboard-widget-fields">
                    {% for field in row.fields %}
                        {% include 'core/_quick_card_field.html' with field=field row=row %}
                    {% endfor %}
                </div>
            </div>
            {% empty %}
            <div class="organization-dashboard-widget-empty">
                {{ widget.empty_message }}
            </div>
            {% endfor %}
        </div>

        <div class="organization-dashboard-widget-footer">
            {% if widget.row_count > widget.visible_count %}
            <span>Top {{ widget.visible_count }} of {{ widget.row_count }} objects</span>
            {% else %}
            <span>{{ widget.row_count }} object{{ widget.row_count|pluralize }}</span>
            {% endif %}
        </div>
    </section>
    {% endfor %}
</div>
{% else %}
<div class="organization-dashboard-empty">
    <p>No Quick Cards are selected.</p>
    <button type="button" class="button secondary js-organization-dashboard-open">
        Choose Quick Cards
    </button>
</div>
{% endif %}

<dialog class="organization-dashboard-dialog" id="organization-dashboard-dialog">
    <form method="post" class="organization-dashboard-dialog-form">
        {% csrf_token %}
        <div class="organization-dashboard-dialog-head">
            <div>
                <h2>Customize Dashboard</h2>
                <p>Choose the Quick Cards you want to see and where this view should apply.</p>
            </div>
            <button
                type="button"
                class="organization-dashboard-dialog-close js-organization-dashboard-close"
                aria-label="Close dashboard settings"
            >×</button>
        </div>

        <fieldset class="organization-dashboard-scope">
            <legend>Apply this dashboard view to</legend>
            <label>
                <input
                    type="radio"
                    name="dashboard_scope"
                    value="default"
                    {% if dashboard_state.scope == 'default' %}checked{% endif %}
                >
                <span>
                    <strong>All organizations</strong>
                    <small>Save this as my default organization dashboard.</small>
                </span>
            </label>
            <label>
                <input
                    type="radio"
                    name="dashboard_scope"
                    value="organization"
                    {% if dashboard_state.scope == 'organization' %}checked{% endif %}
                >
                <span>
                    <strong>{{ org.name }} only</strong>
                    <small>Keep a separate dashboard view for this organization.</small>
                </span>
            </label>
        </fieldset>

        <div class="organization-dashboard-options-head">
            <div>
                <strong>Quick Cards</strong>
                <span>Cards appear in the order shown below.</span>
            </div>
            <div class="organization-dashboard-options-bulk">
                <button type="button" class="button secondary compact js-quick-card-select-all">Select All</button>
                <button type="button" class="button secondary compact js-quick-card-clear-all">Clear All</button>
            </div>
        </div>

        <div class="organization-dashboard-options">
            {% for option in dashboard_widget_options %}
            <label class="organization-dashboard-option">
                <input
                    type="checkbox"
                    name="widget_modules"
                    value="{{ option.module }}"
                    {% if option.selected %}checked{% endif %}
                >
                <span>
                    <strong>{{ option.title }}</strong>
                    <small>{{ option.description }}</small>
                </span>
            </label>
            {% empty %}
            <p class="muted">No organization modules are available to your account.</p>
            {% endfor %}
        </div>

        <div class="organization-dashboard-dialog-actions">
            {% if dashboard_state.has_organization_override %}
            <button
                type="submit"
                name="dashboard_action"
                value="reset_preferences"
                class="button secondary"
            >Reset this organization to my default</button>
            {% endif %}
            <div class="organization-dashboard-dialog-actions-right">
                <button
                    type="button"
                    class="button secondary js-organization-dashboard-close"
                >Cancel</button>
                <button
                    type="submit"
                    name="dashboard_action"
                    value="save_preferences"
                    class="button"
                >Save</button>
            </div>
        </div>
    </form>
</dialog>

{% endblock %}

{% block scripts %}
<script src="/static/js/organization-dashboard.js"></script>
{% endblock %}