<div class="card-deck">
    <div class="card bg-light mb-3">
        <div class="card-body">
            <h5 class="card-title">UI Style & Colors</h5>
            <p class="card-text">
                NDR Core has a number of styles to give your project web site the desired look. A page style
                determines where the UI elements (such as navigation, title, footer, etc.) are placed and how they
                look in general.
                Together with the selected color palette (which determines which colors said elements have) this results
                in styled NDR Core pages.
                You can choose existing styles and palettes or create your own.
            </p>

            <h6>Change UI Style</h6>
            <p class="card-text">
                <ul class="card-text">
                    <li>
                        Go to <a href="{% url 'ndr_core:ui_settings' %}">Style & Colors > Change UI Style</a> and choose
                        an UI style you like.
                    </li>
                    <li>
                        You can select the UI style by clicking "Set this Style as your Page Style".
                        (<strong>Important:</strong> These changes are immediate and change your page.)
                    </li>
                    <li>
                        You can check out the changes on your <a href="{% url 'ndr:test_ui_settings' %}">Test Page</a>.
                        You might have to force-reload your page to show the changes.
                    </li>
                </ul>
            </p>

            <h6>Change Color Palette</h6>
            <p class="card-text">
                <ul class="card-text">
                    <li>
                        Go to <a href="{% url 'ndr_core:configure_colors' %}">Style & Colors > Manage Color Palettes</a>
                        and choose a color palette you like.
                    </li>
                    <li>
                        You can select the color palette by clicking "Set this Palette as your Page Palette".
                        (<strong>Important:</strong> These changes are immediate and change your page.)
                    </li>
                    <li>
                        You can check out the changes on your <a href="{% url 'ndr:test_ui_settings' %}">Test Page</a>.
                        You might have to force-reload your page to show the changes.
                    </li>
                </ul>
            </p>

            <h6>Create a New Palette</h6>
            <p class="card-text">
                Go to <a href="{% url 'ndr_core:create_palette' %}">Style & Colors > Manage Color Palettes > Create New
                Color Palette</a> to create a new palette. Choose the colors by selecting the field or Enter the
                corresponding Hex-Code.
            </p>

            <h6>Import and Export Palette</h6>
            <p class="card-text">
                Palettes can be exported and imported. They need to be in a specific JSON format (see <a href="#">NDR
                Core settings serialization</a>). They define a <code>pk</code> key which is the unique name of the palette.
                If you import a palette with an existing <code>pk</code>, it will be overwritten.
            </p>

            <div class="alert alert-info small" role="alert">
                <i class="fa-regular fa-circle-info"></i>
                Instead of changing a palette you can create a new one with a unique name. This palette can then be
                exported and used in different installations without overwriting default palettes.
            </div>

            <h6>Technical Details</h6>
            <p class="card-text">
                Every time you choose a palette, a CSS file is created and written to your ndr app. It is saved in your
                static folder: <code>static/ndr/css/colors.css</code>. The CSS file defines the colors of bootstrap
                elements such as <code>.btn-primary</code>,  <code>.btn-secondary</code>, etc.
            </p>

            <div class="alert alert-warning small" role="alert">
                <i class="fa-regular fa-exclamation-circle"></i>
                Do not modify <code>static/ndr/css/colors.css</code> as it gets overwritten every time you save a new
                color palette setting.
            </div>

            <h6>See also</h6>
            <p class="card-text">
                <i>
                    (Administration pages in <span class="bg-primary text-white">blue</span>, help pages in
                    <span class="bg-secondary text-white">grey</span>, external links in
                    <span class="bg-warning">yellow</span>)
                </i>
            </p>
            <p class="card-text">
                <a href="#" class="btn btn-sm btn-secondary" role="button">XXX</a>
                <a href="#" class="btn btn-sm btn-secondary" role="button">XXX</a>
                <a href="#" class="btn btn-sm btn-warning" role="button">NDR Core Settings Serialization</a>
            </p>
        </div>
    </div>
</div>