<!-- template-lint triple-curlies=false -->
{{#if editMode}}
  <div>
    {{#if createMode}}
      <label>{{i18n 'Name'}} <span class="cl-red">*</span></label>
      {{input value=content.name class='text text--full-width mg-b-1' maxlength='25'}}
      {{#if content.name}}
        {{#if isNameValid}}
          <div class="sub-text mg-b-2">
            {{communityUrl}}
          </div>
        {{else}}
          <div class="sub-text mg-b-2 cl-red">
            {{i18n 'That community name is invalid'}}
          </div>
        {{/if}}
      {{/if}}
    {{/if}}

    <h4>{{i18n 'Community Info'}}</h4>

    <label class="mg-t-2">{{i18n 'Short Description'}} <span class="cl-red">*</span></label>
    <div>{{i18n 'A short description used in search results and social media links. 160 characters max.'}}</div>
    {{textarea value=content.summary class='full-width mg-b-0 mg-t-1'}}
    <div class="sub-text {{if isOver160 'cl-red' }}">{{count160String}}</div>

    <label class="mg-t-2">{{i18n 'Long description'}} <span class="cl-red">*</span></label>
    <div>{{i18n 'A long description that appears on the community page.'}}</div>
    {{textarea value=content.description class="full-width mg-b-0 mg-t-1"}}
    <div class="sub-text">
      {{i18n 'Supports'}}
      <a href="http://help.twitch.tv/customer/portal/articles/839490-markdown-basics" target="_blank" rel="noopener">
        {{i18n 'Markdown'}}
      </a>
      {{i18n '(No HTML)'}}
    </div>

    <label class="mg-t-2">{{i18n 'Rules'}} <span class="cl-red">*</span></label>
    <div>
      {{#with (i18n-split-string 'A set of rules outlining the types of games or content that is acceptable for this community. Must adhere to the |Twitch Terms of Service|.') as |translated|}}
        {{at-index translated 0}}
        <a href="/p/terms-of-service" target="_blank" rel="noopener noreferrer">{{at-index translated 1}}</a>{{at-index translated 2}}
      {{/with}}
    </div>
    {{textarea value=content.rules class="full-width mg-b-0 mg-t-1"}}
    <div class="sub-text">
      {{i18n 'Supports'}}
      <a href="http://help.twitch.tv/customer/portal/articles/839490-markdown-basics" target="_blank" rel="noopener">
        {{i18n 'Markdown'}}
      </a>
      {{i18n '(No HTML)'}}
    </div>

    {{#if createMode}}
      <div class="mg-t-2">
        {{input type="checkbox" id="agree" checked=agree}}
        <label for="agree" class="inline">
          {{#with (i18n-split-string 'I agree to the |Twitch Community Guidelines|') as |translated|}}
            {{at-index translated 0}}
            <a href="/p/community-guidelines" target="_blank" rel="noopener noreferrer">{{at-index translated 1}}</a>
          {{/with}}
        </label>
      </div>

      {{#common/button-element isDisabled=(or submitDisabled (not canSaveCommunity)) onClick=(action 'create') class="mg-t-2"}}
        {{i18n 'Create a Community'}}
      {{/common/button-element}}
    {{else}}
      {{#common/button-element isDisabled=(or submitDisabled (not canSaveCommunity)) onClick=(action 'update') class="mg-t-2"}}
        {{i18n 'Save'}}
      {{/common/button-element}}
    {{/if}}
    <span class="loading-spinner {{unless isLoading 'hidden'}}"></span>
  </div>
{{else}}
  {{#if content.description}}
    <div class="brick brick--theme-grey brick--pd-none">
      <div class="upcase sub-text border-b pd-1">{{i18n 'Description'}}</div>
      <div class="cm-info pd-1">{{{content.description_html}}}</div>
    </div>
  {{/if}}
  {{#if content.rules}}
    <div class="brick brick--theme-grey brick--pd-none mg-t-2">
      <div class="upcase sub-text border-b pd-1">{{i18n 'Rules'}}</div>
      <div class="cm-info pd-1">{{{content.rules_html}}}</div>
    </div>
  {{/if}}
{{/if}}
