<?xml version="1.0" encoding="utf-8"?>
<!--
   This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
-->

<merge xmlns:android="http://schemas.android.com/apk/res/android" >

    <LinearLayout
        android:id="@+id/email_password_view"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <AutoCompleteTextView
            android:id="@+id/email"
            style="@style/FxAccountEditItem"
            android:layout_marginBottom="10dp"
            android:completionThreshold="2"
            android:ems="10"
            android:hint="@string/fxaccount_email_hint"
            android:inputType="textEmailAddress" >

            <requestFocus />
        </AutoCompleteTextView>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:orientation="horizontal" >

            <EditText
                android:id="@+id/password"
                style="@style/FxAccountEditItem"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:layout_marginBottom="0dp"
                android:background="@drawable/fxaccount_password_background"
                android:ems="10"
                android:hint="@string/fxaccount_password_hint"
                android:inputType="textPassword" />

            <!-- For the following, I beg forgiveness. The show/hide button is a
                 toggle button; its text depends on its state. The text for each
                 state could be a different length. We want to maintain the
                 button's width regardless of its state. To achieve this, we
                 size the actual button to its container, and include two
                 invisible (but present for layout purposes) buttons, one of
                 each state. The container wraps the larger of the two dummy
                 buttons; the actual button sizes to the container; and we're
                 happy. Be thankful there are not three buttons! -->
            <FrameLayout
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:layout_weight="0"
                android:orientation="horizontal" >

                <Button
                    android:id="@+id/show_password"
                    style="@style/FxAccountShowHidePasswordButton"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:text="@string/fxaccount_password_show" >
                </Button>

                <Button
                    style="@style/FxAccountShowHidePasswordButton"
                    android:layout_width="wrap_content"
                    android:layout_height="fill_parent"
                    android:text="@string/fxaccount_password_show"
                    android:visibility="invisible" >
                </Button>

                <Button
                    style="@style/FxAccountShowHidePasswordButton"
                    android:layout_width="wrap_content"
                    android:layout_height="fill_parent"
                    android:text="@string/fxaccount_password_hide"
                    android:visibility="invisible" >
                </Button>
            </FrameLayout>
        </LinearLayout>
    </LinearLayout>

</merge>
