{$wrapper_id = uniqid('crm-contact-segment-list-edit-wrapper-')}

{$segment.icon = $segment.icon|default:'contact'}
{$segment.type = $segment.type|default:crmSegmentModel::TYPE_CATEGORY}

{$icons_array = [
    "folder" => "<i class=\"fas fa-folder\"></i>",
    "search" => "<i class=\"fas fa-search\"></i>",
    "user" => "<i class=\"fas fa-user\"></i>",
    "blog" => "<i class=\"fas fa-file-image\"></i>",
    "notebook" => "<i class=\"fas fa-file\"></i>",
    "lock" => "<i class=\"fas fa-lock\"></i>",
    "lock-unlocked" => "<i class=\"fas fa-lock-open\"></i>",
    "broom" => "<i class=\"icon custom-mr-0\"><svg><use xlink:href=\"{$wa_url}wa-apps/blog/img/sprites/icons.svg?v={$wa->version()}#clean\"></use></svg></i>",
    "star" => "<i class=\"fas fa-star\"></i>",
    "livejournal" => "<i class=\"fas fa-pencil-alt\"></i>",
    "contact" => "<i class=\"fas fa-users\"></i>",
    "lightning" => "<i class=\"fas fa-bolt\"></i>",
    "light-bulb" => "<i class=\"fas fa-lightbulb\"></i>",
    "pictures" => "<i class=\"fas fa-images\"></i>",
    "reports" => "<i class=\"fas fa-chart-bar\"></i>",
    "books" => "<i class=\"fas fa-book\"></i>",
    "marker" => "<i class=\"fas fa-map-marker-alt\"></i>",
    "lens" => "<i class=\"icon custom-mr-0\"><svg><use xlink:href=\"{$wa_url}wa-apps/blog/img/sprites/icons.svg?v={$wa->version()}#lens\"></use></svg></i>",
    "alarm-clock" => "<i class=\"icon custom-mr-0\"><svg><use xlink:href=\"{$wa_url}wa-apps/blog/img/sprites/icons.svg?v={$wa->version()}#alarm\"></use></svg></i>",
    "animal-monkey" => "<i class=\"icon custom-mr-0\"><svg><use xlink:href=\"{$wa_url}wa-apps/blog/img/sprites/icons.svg?v={$wa->version()}#monkey\"></use></svg></i>",
    "anchor" => "<i class=\"fas fa-anchor\"></i>",
    "bean" => "<i class=\"icon custom-mr-0\"><svg><use xlink:href=\"{$wa_url}wa-apps/blog/img/sprites/icons.svg?v={$wa->version()}#coffee-beans\"></use></svg></i>",
    "car" => "<i class=\"fas fa-car\"></i>",
    "disk" => "<i class=\"fas fa-save\"></i>",
    "cookie" => "<i class=\"fas fa-cookie\"></i>",
    "burn" => "<i class=\"fas fa-radiation-alt\"></i>",
    "clapperboard" => "<i class=\"icon custom-mr-0\"><svg><use xlink:href=\"{$wa_url}wa-apps/blog/img/sprites/icons.svg?v={$wa->version()}#clapper\"></use></svg></i>",
    "bug" => "<i class=\"fas fa-bug\"></i>",
    "clock" => "<i class=\"fas fa-clock\"></i>",
    "cup" => "<i class=\"fas fa-coffee\"></i>",
    "home" => "<i class=\"fas fa-home\"></i>",
    "fruit" => "<i class=\"fas fa-apple-alt\"></i>",
    "luggage" => "<i class=\"fas fa-briefcase\"></i>",
    "guitar" => "<i class=\"fas fa-guitar\"></i>",
    "smiley" => "<i class=\"fas fa-grin\"></i>",
    "sport-soccer" => "<i class=\"fas fa-futbol\"></i>",
    "target" => "<i class=\"fas fa-bullseye\"></i>",
    "medal" => "<i class=\"fas fa-award\"></i>",
    "phone" => "<i class=\"fas fa-phone\"></i>",
    "store" => "<i class=\"fas fa-store\"></i>",
    "basket" => "<i class=\"fas fa-shopping-basket\"></i>",
    "pencil" => "<i class=\"fas fa-pen-alt\"></i>",
    "lifebuoy" => "<i class=\"fas fa-life-ring \"></i>",
    "screen" => "<i class=\"fas fa-tablet-alt\"></i>",
    "noname" => "<i class=\"fas fa-user-friends\"></i>"
]}

<div class="dialog crm-contact-segment-list-edit-wrapper" id="{$wrapper_id}">
    <div class="dialog-background"></div>
    <div class="dialog-body">

        <form method="post" action="{$wa_app_url}?module=contactSegment&action=save{if $segment.id > 0}&id={$segment.id}{/if}">

            <header class="dialog-header">
                <h1>{strip}
                    {if $segment.id > 0}
                        [`Edit segment`]
                    {else}
                        [`Create segment`]
                    {/if}
                {/strip}</h1>
            </header>

            <div class="dialog-content" style="max-height: 69vh;">

                <div class="fields">


                    <div class="field">
                        <div class="name">[`Name`]</div>
                        <div class="value">
                            <input type="text" value="{$segment.name|escape}" class="crm-name-input" name="name">
                        </div>
                    </div>

                    {if $segment.id <= 0}
                        {if $segment.type === crmSegmentModel::TYPE_CATEGORY}
                            <div class="field">
                                <div class="name"></div>
                                <div class="value">
                                    <label class="crm-access-label">
                                        <input type="radio" name="type" value="{crmSegmentModel::TYPE_CATEGORY}" checked="checked"> [`Static list`]
                                        <i class="fas fa-users"></i>
                                        <span class="hint">[`manually selected contacts`]</span>
                                    </label>
                                    <label class="crm-access-label">
                                        <input type="radio" name="type" value="{crmSegmentModel::TYPE_SEARCH}"> [`Dynamic filter`]
                                        <i class="fas fa-filter"></i>
                                        <span class="hint">[`advanced search results`]</span>
                                    </label>
                                </div>
                            </div>
                        {else}
                            <input type="hidden" name="type" value="{crmSegmentModel::TYPE_SEARCH}">
                        {/if}
                    {/if}

                    <div class="field crm-icons-block custom-mt-24">
                        <div class="name">[`Icon`]</div>
                        <div class="value">
                            <ul class="chips custom-mt-0">
                                {foreach $icons as $icon}
                                    <li data-icon="{$icon}" {if $icon == $segment.icon}class="selected"{/if}>
                                        <a href="javascript:void(0)">
                                            {if array_key_exists($icon, $icons_array)}
                                                {$icons_array[$icon]}
                                            {else}
                                                <i class="fas fa-{$icon}"></i>
                                            {/if}
                                        </a>
                                    </li>
                                {/foreach}
                            </ul>
                            <input type="hidden" name="icon" value="{$segment.icon}">
                        </div>
                    </div>

                    <div class="field">
                        <div class="name">[`Access`]</div>
                        <div class="value">
                            <label class="crm-access-label"><input type="radio" name="shared" value="0" {if $segment.shared == "0"}checked="checked"{/if}> [`only me`]</label>
                            <label class="crm-access-label"><input type="radio" name="shared" value="1" {if $segment.shared == "1"}checked="checked"{/if}> [`all users`]</label>
                        </div>
                    </div>

                    {if $segment.id > 0}
                        <div class="field crm-description">
                            {if $segment.type === crmSegmentModel::TYPE_SEARCH}
                                <p>[`This list is the search result:`]
                                    <a href="{$wa_app_url}contact/search/segment/{$segment.id}/{if $segment.search_info.hash}{$segment.search_info.hash|urlencode}/{/if}">{$segment.search_info.title}</a>
                                    {if $segment.contact_id && $segment.contact_id !== '0'}
                                        <br>[`Created by`] {$segment.contact.name|escape}, {$segment.create_datetime|wa_date:'humandatetime'}
                                    {/if}
                                </p>
                            {elseif ($segment.type === 'category')}
                                {if $segment.system_id}
                                    <p>
                                        [`This list is based on a category transferred from the standard version of the Contacts app.`]
                                        {sprintf('[`Contact entries in this category are created and updated automatically by the %s app.`]', $segment.app_name|default:'')}
                                    </p>
                                {elseif $segment.app_id}
                                    <p>
                                        {sprintf('[`This list is based on a category created in the %s app.`]', $segment.app_name|default:'')}
                                        {sprintf('[`To change settings or delete this category use appropriate tools of the %s app.`]', $segment.app_name|default:'')}
                                    </p>
                                {else}
                                    [`This list consists of selected contacts. To add/remove contacts use “Actions with selected” menu.`]
                                    <br>[`Created by`] {$segment.contact.name|escape}, {$segment.create_datetime|wa_date:'humandatetime'}
                                {/if}
                            {/if}
                        </div>
                    {/if}

                </div>
            </div>

            <footer class="dialog-footer">
                <div class="c-layout">
                    <div class="c-column">
                        {if $segment.id > 0}
                            <input class="button green crm-button" type="submit" value="[`Save`]">
                        {else}
                            <input class="button green crm-button" type="submit" value="[`Create`]">
                        {/if}
                        <span class="icon loading crm-loading" style="display: none"><i class="fas fa-spinner wa-animation-spin speed-1000"></i></span>

                        {* Default close link, need in all cases except one, see below comment *}
                        <a class="button light-gray js-close-dialog" href="javascript:void(0);">[`Cancel`]</a>

                        {* This link special treated in double-dialog case, see CRMContactsOperationAddToSegments class *}
                        <a class="button light-gray crm-cancel-link" href="javascript:void(0);" style="display: none;">[`Cancel`]</a>
                        <span class="icon loading crm-cancel-loading" style="display: none"><i class="fas fa-spinner wa-animation-spin speed-1000"></i></span>
                    </div>
                    <div class="c-column middle right">
                        {* Delete segment link, see CRMContactSegmentEdit *}
                        {if $segment.id > 0}
                            <a class="button red crm-delete-link" href="javascript:void(0);">
                                <i class="fas fa-trash"></i>[`Delete segment`]
                            </a>
                        {/if}
                    </div>
                </div>
            </footer>

            <input type="hidden" name="hash" value="{if $segment.type === crmSegmentModel::TYPE_SEARCH}{$segment.search_info.hash}{/if}">

        </form>
    </div>

    <script>
        $(function () {
            new CRMContactSegmentEdit({
                '$wrapper': $('#{$wrapper_id}'),
                'segment': {$segment|json_encode},
                'messages': {
                    'delete_confirm_title': '[`Delete segment?`]',
                    'delete_confirm_text': '<p>[`Do you really want to delete this list?`]</p><p>[`Contacts will NOT be deleted.`]</p>',
                    'delete_button': '[`Delete`]'
                }
            });
        });
    </script>

</div>