<div id="linkifier-settings" class="settings-section" data-name="linkifier-settings">
    <div class="admin-table-wrapper">

        <p>
            {{#tr}}
            Configure regular expression patterns that will be
            automatically linkified when used in Zulip message bodies or
            topics.  For example to automatically linkify commit IDs and
            issue numbers (e.g. #123) to the corresponding items in a GitHub
            project, you could use the following:
            {{/tr}}
        </p>
        <ul>
            <li>
                <code>#(?P&lt;id&gt;[0-9]+)</code>
                {{t "and" }}
                <code>https://github.com/zulip/zulip/issues/%(id)s</code>
            </li>
            <li>
                <code>(?P&lt;id&gt;[0-9a-f]{40})</code>
                {{t "and" }}
                <code>https://github.com/zulip/zulip/commit/%(id)s</code>
            </li>
        </ul>
        <p>
            {{#tr}}
            Or, to automatically linkify GitHub's <code>org/repo#1234</code> syntax:
            {{/tr}}
        </p>
        <ul>
            <li>
                <code>(?P&lt;org&gt;[a-zA-Z0-9_-]+)/(?P&lt;repo&gt;[a-zA-Z0-9_-]+)#(?P&lt;id&gt;[0-9]+)</code>
                {{t "and" }}
                <code>https://github.com/%(org)s/%(repo)s/issues/%(id)s</code>
            </li>
        </ul>
        <p>
            {{#tr}}
                More details are available <z-link>in the Help Center article</z-link>.
                {{#*inline "z-link"}}<a href="/help/add-a-custom-linkifier" target="_blank" rel="noopener noreferrer">{{> @partial-block}}</a>{{/inline}}
            {{/tr}}
        </p>

        {{#if is_admin}}
        <form class="form-horizontal admin-linkifier-form">
            <div class="add-new-linkifier-box grey-box">
                <div class="new-linkifier-form wrapper">
                    <div class="settings-section-title new-linkifier-section-title">{{t "Add a new linkifier" }}</div>
                    <div class="alert" id="admin-linkifier-status"></div>
                    <div class="control-group">
                        <label for="linkifier_pattern" class="control-label">{{t "Pattern" }}</label>
                        <input type="text" id="linkifier_pattern" name="pattern" placeholder="#(?P<id>[0-9]+)" />
                        <div class="alert" id="admin-linkifier-pattern-status"></div>
                    </div>
                    <div class="control-group">
                        <label for="linkifier_format_string" class="control-label">{{t "URL format string" }}</label>
                        <input type="text" id="linkifier_format_string" name="url_format_string" placeholder="https://github.com/zulip/zulip/issues/%(id)s" />
                        <div class="alert" id="admin-linkifier-format-status"></div>
                    </div>
                    <button type="submit" class="button rounded sea-green">
                        {{t 'Add linkifier' }}
                    </button>
                </div>
            </div>
        </form>
        {{/if}}

        <div class="settings_panel_list_header">
            <h3>{{t "Linkifiers"}}</h3>
            <div class="alert-notification edit-linkifier-status" id="linkifier-field-status"></div>
            <input type="text" class="search" placeholder="{{t 'Filter linkifiers' }}" aria-label="{{t 'Filter linkifiers' }}"/>
        </div>

        <div class="progressive-table-wrapper" data-simplebar>
            <table class="table table-condensed table-striped wrapped-table admin_linkifiers_table">
                <thead class="table-sticky-headers">
                    <th class="active" data-sort="pattern">{{t "Pattern" }}</th>
                    <th data-sort="url">{{t "URL format string" }}</th>
                    {{#if is_admin}}
                    <th class="actions">{{t "Actions" }}</th>
                    {{/if}}
                </thead>
                <tbody id="admin_linkifiers_table" class="required-text" data-empty="{{t 'No linkifiers set.' }}"></tbody>
            </table>
        </div>
    </div>
</div>
