{% macro create(optionName, isProfile, inputId, permissionSelectionId, network, i18n) %}

    {% set permission = getOptionPermission(isProfile, optionName) %}

    {% set inline = getMetadata(optionName, 'INLINE')|join(' ') %}
    {% set description = getMetadata(optionName, 'DESCRIPTION') %}
    {% set optionDisabled = getMetadata(optionName, 'DISABLED') %}
    {% set type = getMetadata(optionName, 'TYPE') %}
    {% set angularAttributes = getMetadata(optionName, 'ANGULAR_ATTRIBUTES') %}
    {% set angularButtonAttributes = getMetadata(optionName, 'ANGULAR_BUTTON_ATTRIBUTES') %}

    {% set newNetwork = isOnNetworkDashboard() %}


    {% if permission == 2 or permission == 1 %}
        {% set  disabled = "disabled" %}
    {% else %}
        {% set disabled = "" %}
    {% endif %}
    {% if not angularAttributes is empty %}
        {% if  newNetwork %}
            {% set angularAttributes = angularAttributes ~ ' && (0))"' %}
        {% else %}
            {% set angularAttributes = angularAttributes ~ '&& (1))"' %}
        {% endif %}
    {% endif %}
    <table>
        <tr>
            <td class="adi-zero-padding-left">
                <table class="adi-role-equivalent">
                    <tr class="adi-role-equivalent-headline">
                        <td class="adi-zero-padding-left">{{ i18n.securityGroup }}</td>
                        <td class="adi-zero-padding-left adi-equivalent-padding-right">
                            <span class="nsp_dashicons dashicons dashicons-leftright"></span></td>
                        <td class="adi-zero-padding-left">{{ i18n.wordpressRole }}</td>
                        <td>&nbsp;</td>
                    </tr>
                </table>
            </td>
        </tr>

        <tr>
            <td class="adi-role-equivalent-column">
                <table class="adi-role-equivalent">
                    <tr>
                        <td class="adi-zero-padding-left">
                            <input type="text" ng-model="newItemField1" {{ angularAttributes|raw }}>
                        </td>
                        <td>
                            <span class="nsp_dashicons dashicons dashicons-leftright"></span>
                        </td>
                        <td>
                            <selectize class="selectized" config='wpRolesConfig'
                                       options='wpRoles'
                                       ng-model="newItemField2" {{ angularAttributes|raw }} required="true"
                                       style="width: 200px">
                            </selectize>
                        </td>

                        <td {{ angularButtonAttributes|raw }}>
                            <button class="button adi-button button-primary"
                                    ng-click="addTableItem(newItemField1, newItemField2)" {{ angularAttributes|raw }} >
                                <span class="nsp_dashicons dashicons dashicons-plus"></span>
                            </button>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

        <tr ng-repeat="(key, value) in option.{{ optionName }}.groups track by key">
            <td class="adi-role-equivalent-column">
                <table class="adi-role-equivalent">
                    <tr>
                        <td class="adi-zero-padding-left">
                            <input type="text" ng-model="value.securityGroup" {{ angularAttributes|raw }}>
                        </td>
                        <td>
                            <span class="nsp_dashicons dashicons dashicons-leftright"></span>
                        </td>
                        <td>
                            <selectize class="selectized" config='wpRolesConfig'
                                       options='wpRoles'
                                       ng-model="value.wordpressRole" {{ angularAttributes|raw }} required="true"
                                       style="width: 200px">
                                <option value="">{{ i18n.selectRole }}</option>
                            </selectize>
                        </td>

                        <td>
                            <button class="button adi-button"
                                    ng-click="removeTableItem(key)" {{ angularAttributes|raw }}>
                                <span class="nsp_dashicons dashicons dashicons-no-alt"></span>
                            </button>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

    <p>
        {% import "option/element/error-msg.twig" as errorElement %}
        {{ errorElement.create(optionName) }}
    </p>

    <p>
        {% import "option/element/description.twig" as descriptionElement %}
        {{ descriptionElement.create(description) }}
    </p>


{% endmacro %}