<div class="embeddable-hosts">
  {{#if embedding.embeddable_hosts}}
    <table class="embedding grid">
      <thead>
        <th style="width: 25%">{{i18n "admin.embedding.host"}}</th>
        <th style="width: 15%">{{i18n "admin.embedding.class_name"}}</th>
        <th style="width: 25%">{{i18n "admin.embedding.path_whitelist"}}</th>
        <th style="width: 25%">{{i18n "admin.embedding.category"}}</th>
        <th style="width: 10%">&nbsp;</th>
      </thead>
      <tbody>
        {{#each embedding.embeddable_hosts as |host|}}
          {{embeddable-host host=host deleteHost=(action "deleteHost")}}
        {{/each}}
      </tbody>
    </table>
  {{else}}
    <p>{{i18n "admin.embedding.get_started"}}</p>
  {{/if}}

  {{d-button label="admin.embedding.add_host" action=(action "addHost") icon="plus" class="btn-primary add-host"}}
</div>

{{#if showSecondary}}
  <div class="embedding-secondary">
    <p>{{html-safe (i18n "admin.embedding.sample")}}</p>
    {{highlighted-code code=embeddingCode lang="html"}}
  </div>

  <hr>

  <div class="embedding-secondary">
    <h3>{{i18n "admin.embedding.settings"}}</h3>

    {{embedding-setting field="embed_by_username" value=embedding.embed_by_username}}
    {{embedding-setting field="embed_post_limit" value=embedding.embed_post_limit}}
    {{embedding-setting field="embed_title_scrubber"
                        value=embedding.embed_title_scrubber
                        placeholder="- site.com$"}}
    {{embedding-setting field="embed_truncate" value=embedding.embed_truncate type="checkbox"}}
    {{embedding-setting field="embed_unlisted" value=embedding.embed_unlisted type="checkbox"}}
  </div>

  <div class="embedding-secondary">
    <h3>{{i18n "admin.embedding.crawling_settings"}}</h3>
    <p class="description">{{i18n "admin.embedding.crawling_description"}}</p>

    {{embedding-setting field="embed_whitelist_selector"
                        value=embedding.embed_whitelist_selector
                        placeholder="article, #story, .post"}}

    {{embedding-setting field="embed_blacklist_selector"
                        value=embedding.embed_blacklist_selector
                        placeholder=".ad-unit, header"}}

    {{embedding-setting field="embed_classname_whitelist"
                        value=embedding.embed_classname_whitelist
                        placeholder="emoji, classname"}}
  </div>

  <div class="embedding-secondary">
    {{d-button label="admin.embedding.save"
               action=(action "saveChanges")
               class="btn-primary embed-save"
               disabled=embedding.isSaving}}

    {{#if saved}}{{i18n "saved"}}{{/if}}
  </div>
{{/if}}
