<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
<link rel="import" href="chrome://resources/html/assert.html">
<link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_pref_behavior.html">
<link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_pref_indicator.html">
<link rel="import" href="../controls/pref_control_behavior.html">
<link rel="import" href="appearance_browser_proxy.html">

<dom-module id="home-url-input">
  <template>
    <style>
      :host {
        cursor: auto;
        display: block;
        width: 100%;
      }

      cr-input {
        width: 100%;
        --cr-input-width: 50%;
      }
    </style>
    <!-- Max length of 100 KB to prevent browser from freezing. -->
    <cr-input id="input" value="{{value}}" error-message="$i18n{notValid}"
        placeholder="$i18n{enterCustomWebAddress}" maxlength="102400"
        on-change="onChange_" on-keydown="onKeydown_" on-input="validate_"
        invalid="{{invalid}}" tabindex="[[getTabindex_(canTab)]]"
        disabled="[[isDisabled_(disabled, pref.*)]]" spellcheck="false"
        on-keyup="stopKeyEventPropagation_"
        on-keypress="stopKeyEventPropagation_">
      <template is="dom-if" if="[[hasPrefPolicyIndicator(pref.*)]]">
        <cr-policy-pref-indicator pref="[[pref]]" icon-aria-label="[[label]]"
            slot="suffix">
        </cr-policy-pref-indicator>
      </template>
    </cr-input>
  </template>
  <script src="home_url_input.js"></script>
</dom-module>