{#
Renders a symfony form field.
@param Object field: represents the form field.
#}
{% macro field(field) %}
    <div class="form-group row">
        <div class="col">
            {{ form_label(field) }}
            {{ form_widget(field) }}
            {% if field.vars.errors|length %}
                <div class="text-danger">
                    {{ form_errors(field) }}
                </div>
            {% endif %}
            {% if field.vars.attr.help ?? false %}
                <small class="text-muted">{{ field.vars.attr.help|raw }}</small>
            {% endif %}

        </div>
    </div>
{% endmacro %}

{#
Renders a "No results found" label.
@param {string} message: represents the message to be rendered
@param {string} id: represents the id of the component
@param {boolean} textCenter: Indicates the text is centered or not
@param {string|null} class: The css class to apply.
#}
{% macro no_result(message, id, textCenter = true, class = null) %}
    <div {% if id %}id="{{ id }}"{% endif %} class="callout callout-warning {{ class ? class }}">
        <p class="{{ textCenter ? 'text-center' }} text-muted font-14">
            {% if message %}
                {{ message }}
            {% else %}
                No results found.
            {% endif %}
        </p>
    </div>
{% endmacro %}

{#
Renders Dots loading component
#}
{% macro loading_dot() %}
    <div class="text-center d-none p-1" data-id="loading-dot">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
    </div>
{% endmacro %}

{#
Renders the form processing overlay component.
#}
{% macro form_processing() %}
    <div class="overlay d-none">
        <div class="spinner-border text-info" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>
{% endmacro %}

{#
Renders a skeleton loading component
@param {string} id Represents the components id.
#}
{% macro loading_skeleton(id) %}
    {% set idAttr = 'loading-skeleton' %}
    {% if id %}
        {% set idAttr = id %}
    {% endif %}
    <div id="{{ idAttr }}" class="skeleton-box">
        <div class="skeleton">
            <div class="skeleton-left flex1">
                <div class="square"></div>
            </div>
            <div class="skeleton-right flex2">
                <div class="line h17 w40 m10"></div>
                <div class="line"></div>
                <div class="line h8 w50"></div>
                <div class="line  w75"></div>
            </div>
        </div>
    </div>
{% endmacro %}

{#
Renders the success flash notification messages caming from symfony controllers.
#}
{% macro notifications_success() %}
    {% for message in app.flashes('success') %}
        <div class="notifications-success d-none">
            {{ message }}
        </div>
    {% endfor %}
{% endmacro %}

{#
Renders the error flash notification messages caming from symfony controllers.
#}
{% macro notifications_error() %}
    {% for message in app.flashes('error') %}
        <div class="notifications-error d-none">
            {{ message }}
        </div>
    {% endfor %}
{% endmacro %}

{#
Renders the warning flash notification messages caming from symfony controllers.
#}
{% macro notifications_warning() %}
    {% for message in app.flashes('warning') %}
        <div class="notifications-warning d-none">
            {{ message }}
        </div>
    {% endfor %}
{% endmacro %}

{#
Renders the copyright information #}
{% macro copyright() %}
    {% set startDate = '2022' %}
    {% set nowYear = 'now' | date('Y') %}
    {% if nowYear == startDate %}
        Copyright &copy; {{ startDate }}.
    {% else %}
        Copyright &copy; {{ startDate }} - {{ nowYear }}
    {% endif %}
{% endmacro %}

{#
Use this macro to render an input field with a spinner loader inside.
@param {Object} field Represents the field to overlay.
#}
{% macro inputSpinner(field) %}
    <div class="form-group">
        {{ form_label(field) }}
        <div class="inputcontainer">
            {{ form_widget(field) }}
            <div class="icon-container d-none">
                <i class="loader"></i>
            </div>
        </div>
        {% if field.vars.errors|length %}
            <div class="text-danger">
                {{ form_errors(field) }}
            </div>
        {% endif %}
    </div>
{% endmacro %}

{#
# Use this macro to render the spinner inside a button.
#}
{% macro buttonSpinner() %}
    <span class="spinner-border spinner-border-sm d-none btn-spinner" role="status" aria-hidden="true"></span>
{% endmacro %}

{#
# Use this macro to render the recaptcha protection message.
#}
{% macro recaptchaV3Description() %}
    <small class="text-muted">
        This site is protected by reCAPTCHA V3 and the Google
        <a class="artc-link" href="https://policies.google.com/privacy">Privacy Policy</a> and
        <a class="artc-link" href="https://policies.google.com/terms">Terms of Service</a> apply.
    </small>
{% endmacro %}


{# Use this macro to render the errors within an alert div.bg-danger
@param {array} errors: Contains the error messages if any.
#}
{% macro errors(errors) %}
    {% if errors is defined and errors is not empty %}
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
            {% for error in errors %}
                <span>{{ error }}</span>
            {% endfor %}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    {% endif %}
{% endmacro %}

{% macro alertError(message) %}
    <div class="pt-1 pb-1 alert alert-danger alert-dismissible text-center" style="background-color: #ee949d;color: black">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
        <i class="icon fas fa-triangle-exclamation"></i>
        {{ message }}
    </div>
{% endmacro %}





{# Use this macro to render the boolean icon. Check in green id true , Times in reds if false.
@param {boolean} value: Indicator wether it's valid or not.
#}

{% macro booleanIcon(value) %}
    <strong>
        {% if value %}
            <i class="fa-solid fa-circle-check text-success" title="Active"></i>
        {% else %}
            <i class="fa fa-times-circle text-danger" aria-hidden="true" title="Inactive"></i>
        {% endif %}
    </strong>
{% endmacro %}

{#
Use this macro to render the badge. green if true , reds if false.
@param {satring} value: Value to be placed as a badge.
#}

{% macro booleanBadge(value) %}
    {% if value %}
        <span class="badge badge-success y-badge">Active</span>
    {% else %}
        <span class="badge badge-danger y-badge">Inactive</span>
    {% endif %}
{% endmacro %}


{#
Use this macro to render a `Copy to Clipboard` btn.
@param {string} data: Data to be copied.
@param {satring} defaultBtnTxt: Default text that has the btn to copy to clipboard.
#}
{% macro copyToClipboardButton(data, defaultBtnTxt = null) %}
    <button title="Copy to Clipboard"
            data-text="{{ data }}"
            class="btn btn-outline-secondary btn-xs btnCopyToClipBoard">
        <i class="fa fa-copy"></i>
        <span class="text-copy-clipboard"
              data-default-text="{{ defaultBtnTxt }}">{{ defaultBtnTxt }}</span>
    </button>
{% endmacro %}

{#
Macro for building the button for copying a text on the clipboard.
 @param string id identifer of the notepad
 @param int rows Number of rows of the notepad textarea
#}
{% macro notepad(id, rows = 5) %}
    <div class="form-group">
        <div class="text-right mb-2">
            <button class="btn btn-light btn-sm" type="button" data-toggle="collapse"
                    data-target="#textSanitizerBox-{{ id }}"
                    aria-expanded="false">
                See text sanitizer box
            </button>
        </div>
        <div class="collapse" id="textSanitizerBox-{{ id }}">
            <div class="card card-body p-2">
                <div>
                    <textarea id="notepad-{{ id }}" class="form-control " rows="{{ rows }}"></textarea>
                </div>
                <div>
                    <button type="button"
                            class="btn btn-sm btn-outline-secondary mt-1 btnCopyArticleToClipBoard"
                            data-notepad="#notepad-{{ id }}">
                        <i class="fas fa-copy"></i>
                        Copy to Clipboard
                    </button>
                </div>
            </div>
        </div>
    </div>
{% endmacro %}

{#
Preview an image.
@param {string} imgFilename: Filename of the image to render.
@param {string} cssClass: Additional css classes applied to the image.
#}
{% macro imgPreview(imgFilename, cssClass) %}
    <div>
        <label>Picture preview.</label>
    </div>
    <img {% if imgFilename %}src="{{ imgFilename }}"{% endif %}
         class="img-fluid y-img-preview {{ cssClass }}">
{% endmacro %}

{#
Renders the pagination html component
@param: {Object} pagination: Holds the pagination details.
#}
{% macro pagination(pagination) %}
    <div class="row ">
        <div class="col p-2">
            <div class="navigation d-flex justify-content-center">
                {{ knp_pagination_render(pagination) }}
            </div>
        </div>
    </div>
{% endmacro %}

{#
Renders the filter indicator.This is a link that holds the name of the filter and its value, also a btn to remove it.
@param: {string} name: Name of the filter
@param: {string} value: Value of the filter
@param: {string} url: URL to redirect after the filter is removed from the view.
#}
{% macro filterIndicator(name, value, url) %}
    <small class="ml-2 mr-2 filterIndicator">
        <a href="{{ url }}">
            <i class="fa fa-times-circle"></i>
        </a>
        <strong>{{ name }}:</strong>
        <span>{{ value }}</span>
    </small>
{% endmacro %}

{#
Renders the btn to navigate from an admin form to the respective page in production.

@param: {string} url:              The URL to redirect the user
@param: {string} pageName:         The name the page is named. e.g: https://o-cpg-frontend.vercel.app/about
@param: {string} pageRoute:        The absolute page route. e.g: /about.
@param: {string} extraDescription: Additional description to render as helper information about the
                                   referenced form fields.
#}
{% macro goToLivePage(url, pageName, pageRoute, extraDescription = null) %}
    <div class="mt-4">
        <div class="card p-3">
            <div class="card-body">
                <p>
                    <small class="text-muted">
                        <i class="fa fa-question-circle mr-2"></i>
                        The following content will be located on the route <strong>{{ pageRoute }}</strong> of Operation
                        CPG website.
                    </small>
                </p>
                <div>
                    <small class="text-muted">
                        <a target="_blank" href="{{ url }}{{ pageRoute }}" class="btn btn-sm btn-default">See live results on
                            <strong>{{ pageName }}</strong> page</a>
                        {% if extraDescription %}
                            <span>{{ extraDescription }}</span>
                        {% endif %}
                    </small>
                </div>
            </div>
        </div>
    </div>
{% endmacro %}

{#
Renders the password security policy information to indicate via a helper text how the password should be created.
#}
{% macro passwordFormatHelper() %}
    <div>
        <small class="text-muted">
            To ensure that the password is secure, the password must have the following format:
        </small>
    </div>
    <ul class="text-muted">
        <li><small>At least 6 characters long</small></li>
        <li><small>At least one uppercase letter</small></li>
        <li><small>At least one number</small></li>
        <li><small>At least one special character</small></li>
        <li><small>No more than 30 characters.</small></li>
    </ul>
{% endmacro %}