<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:paddingHorizontal="@dimen/convert_75px">

    <com.develop.step.widgets.RingControlView
        android:id="@+id/temp_ring_view"
        android:layout_width="@dimen/convert_500px"
        android:layout_height="@dimen/convert_500px"
        android:visibility="invisible"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintVertical_bias="0.35"/>

    <com.develop.step.widgets.RingControlView
        android:id="@+id/speed_ring_view"
        android:layout_width="@dimen/convert_500px"
        android:layout_height="@dimen/convert_500px"
        android:visibility="invisible"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintVertical_bias="0.35"/>

    <TextView
        android:id="@+id/tv_speed_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2"
        android:textColor="#E60012"
        android:textSize="@dimen/convert_90px"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="@+id/speed_ring_view"
        app:layout_constraintEnd_toEndOf="@+id/speed_ring_view"
        app:layout_constraintStart_toStartOf="@+id/speed_ring_view"
        app:layout_constraintTop_toTopOf="@+id/speed_ring_view"
        app:layout_constraintVertical_bias="0.45" />
    
    <TextView
        android:id="@+id/tv_ring_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#E60012"
        android:textSize="@dimen/convert_90px"
        android:text="80°C"
        android:visibility="gone"
        app:layout_constraintStart_toStartOf="@+id/temp_ring_view"
        app:layout_constraintEnd_toEndOf="@+id/temp_ring_view"
        app:layout_constraintTop_toTopOf="@+id/temp_ring_view"
        app:layout_constraintBottom_toBottomOf="@+id/temp_ring_view"
        app:layout_constraintVertical_bias="0.45"/>

    <TextView
        android:id="@+id/tv_ring_text_cooking"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#FFA627"
        android:textSize="@dimen/convert_54px"
        android:text="80°C"
        android:visibility="gone"
        app:layout_constraintStart_toStartOf="@+id/temp_ring_view"
        app:layout_constraintEnd_toEndOf="@+id/temp_ring_view"
        app:layout_constraintTop_toBottomOf="@+id/tv_ring_text"/>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/cl_set_time"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:visibility="gone"
        tools:background="#aaa"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintVertical_bias="0.36">

        <TextView
            android:id="@+id/tv_dot_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#ffffff"
            android:textSize="@dimen/convert_180px"
            android:text=":"
            android:includeFontPadding="false"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/tv_set_time_first"
            android:layout_width="@dimen/convert_260px"
            android:layout_height="@dimen/convert_250px"
            android:layout_marginTop="@dimen/convert_36px"
            app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
            app:layout_constraintTop_toTopOf="@+id/tv_dot_time"
            app:layout_constraintBottom_toBottomOf="@+id/tv_dot_time"
            app:layout_constraintEnd_toStartOf="@+id/tv_dot_time"/>

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/tv_set_time_second"
            android:layout_width="@dimen/convert_260px"
            android:layout_height="@dimen/convert_250px"
            android:layout_marginTop="@dimen/convert_36px"
            app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
            app:layout_constraintTop_toTopOf="@+id/tv_dot_time"
            app:layout_constraintBottom_toBottomOf="@+id/tv_dot_time"
            app:layout_constraintStart_toEndOf="@+id/tv_dot_time"/>

        <TextView
            android:id="@+id/tv_first_bottom"
            android:layout_width="@dimen/convert_400px"
            android:layout_height="wrap_content"
            android:textColor="#ffffff"
            android:textSize="@dimen/convert_54px"
            android:text="min"
            android:gravity="center"
            android:includeFontPadding="false"
            app:layout_constraintStart_toStartOf="@+id/tv_set_time_first"
            app:layout_constraintEnd_toEndOf="@+id/tv_set_time_first"
            app:layout_constraintTop_toBottomOf="@+id/tv_set_time_first"/>

        <TextView
            android:id="@+id/tv_second_bottom"
            android:layout_width="@dimen/convert_400px"
            android:layout_height="wrap_content"
            android:textColor="#ffffff"
            android:gravity="center"
            android:textSize="@dimen/convert_54px"
            android:text="sec"
            android:includeFontPadding="false"
            app:layout_constraintStart_toStartOf="@+id/tv_set_time_second"
            app:layout_constraintEnd_toEndOf="@+id/tv_set_time_second"
            app:layout_constraintTop_toBottomOf="@+id/tv_set_time_second"/>

    </androidx.constraintlayout.widget.ConstraintLayout>

    <TextView
        android:id="@+id/tv_countdown_time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#ffffff"
        android:textSize="@dimen/convert_54px"
        android:text="--05:00--"
        android:visibility="gone"
        android:layout_marginBottom="@dimen/convert_6px"
        app:layout_constraintBottom_toTopOf="@+id/cl_set_time"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

    <FrameLayout
        android:id="@+id/fl_direction"
        android:layout_width="@dimen/convert_500px"
        android:layout_height="@dimen/convert_500px"
        android:visibility="gone"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintVertical_bias="0.36">

        <ImageView
            android:id="@+id/iv_direction"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/ic_direction" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/tv_turn_right"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:gravity="center"
                android:paddingStart="@dimen/convert_60px"
                android:layout_weight="1"
                android:text="@string/turn_right"
                android:textColor="@color/color_E60012"
                android:textSize="@dimen/convert_39px" />

            <TextView
                android:id="@+id/tv_turn_left"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:paddingEnd= "@dimen/convert_60px"
                android:text="@string/turn_left"
                android:textColor="@color/color_E5E5E5"
                android:textSize="@dimen/convert_39px" />
        </LinearLayout>

    </FrameLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/cl_cook_temp"
        android:layout_width="@dimen/convert_210px"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/temp_ring_view"
        app:layout_constraintBottom_toTopOf="@+id/btn_start">

        <com.develop.food.base.widgets.TriangleView
            android:id="@+id/view_select_temp"
            android:layout_width="@dimen/convert_72px"
            android:layout_height="@dimen/convert_42px"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

        <View
            android:id="@+id/view_background_temp"
            android:layout_width="match_parent"
            android:layout_height="@dimen/convert_330px"
            app:layout_constraintTop_toBottomOf="@+id/view_select_temp"
            android:background="@drawable/bg_cook_item_selected"/>

        <TextView
            android:id="@+id/tv_temp_value"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="80°C"
            android:textColor="@color/cook_panel_text"
            android:textSize="@dimen/convert_54px"
            android:layout_marginTop="@dimen/convert_45px"
            android:includeFontPadding="false"
            app:layout_constraintTop_toTopOf="@+id/view_background_temp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>

        <ImageView
            android:id="@+id/view_icon_temp"
            android:layout_width="@dimen/convert_60px"
            android:layout_height="@dimen/convert_60px"
            android:src="@drawable/ic_cook_temp"
            android:scaleType="fitCenter"
            android:layout_marginBottom="@dimen/convert_70px"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:tint="@color/cook_panel_text" />

        <TextView
            android:id="@+id/tv_title_temp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TEMPERATURE"
            android:textSize="@dimen/convert_27px"
            android:textColor="@color/cook_panel_text"
            android:layout_marginTop="@dimen/convert_8px"
            app:layout_constraintTop_toBottomOf="@+id/view_icon_temp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>

        <TextView
            android:id="@+id/tv_cooking_temp_target"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#FFA627"
            android:text="--80°C--"
            android:textSize="@dimen/convert_36px"
            android:visibility="gone"
            android:layout_marginTop="@dimen/convert_16px"
            app:layout_constraintTop_toBottomOf="@+id/tv_temp_value"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>

    </androidx.constraintlayout.widget.ConstraintLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/cl_cook_time"
        android:layout_width="@dimen/convert_210px"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toEndOf="@+id/cl_cook_temp"
        app:layout_constraintEnd_toStartOf="@+id/cl_cook_speed"
        app:layout_constraintTop_toTopOf="@+id/cl_cook_temp">

        <com.develop.food.base.widgets.TriangleView
            android:id="@+id/view_select_time"
            android:layout_width="@dimen/convert_72px"
            android:layout_height="@dimen/convert_42px"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

        <View
            android:id="@+id/view_background_time"
            android:layout_width="match_parent"
            android:layout_height="@dimen/convert_330px"
            app:layout_constraintTop_toBottomOf="@+id/view_select_time"
            android:background="@drawable/bg_cook_item_selected"/>

        <TextView
            android:id="@+id/tv_set_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="00:60"
            android:textColor="@color/cook_panel_text"
            android:textSize="@dimen/convert_54px"
            android:includeFontPadding="false"
            android:layout_marginTop="@dimen/convert_45px"
            app:layout_constraintTop_toTopOf="@+id/view_background_time"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>

        <ImageView
            android:id="@+id/view_icon_time"
            android:layout_width="@dimen/convert_60px"
            android:layout_height="@dimen/convert_60px"
            android:src="@drawable/ic_cook_time"
            android:scaleType="fitCenter"
            android:layout_marginBottom="@dimen/convert_68px"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:tint="@color/cook_panel_text" />

        <TextView
            android:id="@+id/tv_title_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TIME"
            android:textSize="@dimen/convert_27px"
            android:textColor="@color/cook_panel_text"
            android:layout_marginTop="@dimen/convert_8px"
            app:layout_constraintTop_toBottomOf="@+id/view_icon_time"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>

        <TextView
            android:id="@+id/tv_cooking_time_target"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#FFA627"
            android:text="--05:00--"
            android:textSize="@dimen/convert_36px"
            android:layout_marginTop="@dimen/convert_16px"
            android:visibility="gone"
            app:layout_constraintTop_toBottomOf="@+id/tv_set_time"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>

    </androidx.constraintlayout.widget.ConstraintLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/cl_cook_speed"
        android:layout_width="@dimen/convert_210px"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toEndOf="@+id/cl_cook_time"
        app:layout_constraintEnd_toStartOf="@+id/cl_cook_direction"
        app:layout_constraintTop_toTopOf="@+id/cl_cook_temp">

        <com.develop.food.base.widgets.TriangleView
            android:id="@+id/view_select_speed"
            android:layout_width="@dimen/convert_72px"
            android:layout_height="@dimen/convert_42px"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

        <View
            android:id="@+id/view_background_speed"
            android:layout_width="match_parent"
            android:layout_height="@dimen/convert_330px"
            app:layout_constraintTop_toBottomOf="@+id/view_select_speed"
            android:background="@drawable/bg_cook_item_selected"/>

        <TextView
            android:id="@+id/tv_set_speed"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2"
            android:textColor="@color/cook_panel_text"
            android:textSize="@dimen/convert_54px"
            android:layout_marginTop="@dimen/convert_45px"
            android:includeFontPadding="false"
            app:layout_constraintTop_toTopOf="@+id/view_background_speed"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>

        <ImageView
            android:id="@+id/view_icon_speed"
            android:layout_width="@dimen/convert_60px"
            android:layout_height="@dimen/convert_60px"
            android:src="@drawable/ic_cook_quick"
            android:scaleType="fitCenter"
            android:layout_marginBottom="@dimen/convert_70px"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:tint="@color/cook_panel_text"/>

        <TextView
            android:id="@+id/tv_title_speed"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="SPEED"
            android:textSize="@dimen/convert_27px"
            android:textColor="@color/cook_panel_text"
            android:layout_marginTop="@dimen/convert_8px"
            app:layout_constraintTop_toBottomOf="@+id/view_icon_speed"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>

    </androidx.constraintlayout.widget.ConstraintLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/cl_cook_direction"
        android:layout_width="@dimen/convert_210px"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@+id/cl_cook_temp">

        <com.develop.food.base.widgets.TriangleView
            android:id="@+id/view_select_direction"
            android:layout_width="@dimen/convert_72px"
            android:layout_height="@dimen/convert_42px"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

        <View
            android:id="@+id/view_background_direction"
            android:layout_width="match_parent"
            android:layout_height="@dimen/convert_330px"
            app:layout_constraintTop_toBottomOf="@+id/view_select_direction"
            android:background="@drawable/bg_cook_item_selected"/>

        <TextView
            android:id="@+id/tv_set_direction"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TURN\nRIGHT"
            android:textColor="@color/cook_panel_text"
            android:textSize="@dimen/convert_36px"
            android:layout_marginTop="@dimen/convert_45px"
            android:includeFontPadding="false"
            app:layout_constraintTop_toTopOf="@+id/view_background_direction"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>

        <ImageView
            android:id="@+id/view_icon_direction"
            android:layout_width="@dimen/convert_60px"
            android:layout_height="@dimen/convert_60px"
            android:src="@drawable/ic_cook_rotate"
            android:scaleType="fitCenter"
            android:layout_marginBottom="@dimen/convert_70px"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:tint="@color/cook_panel_text"/>

        <TextView
            android:id="@+id/tv_title_direction"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="DIRECTION"
            android:textSize="@dimen/convert_27px"
            android:textColor="@color/cook_panel_text"
            android:layout_marginTop="@dimen/convert_8px"
            app:layout_constraintTop_toBottomOf="@+id/view_icon_direction"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>

    </androidx.constraintlayout.widget.ConstraintLayout>

    <TextView
        android:id="@+id/btn_start"
        android:layout_width="match_parent"
        android:layout_height="@dimen/convert_120px"
        android:background="@drawable/bg_orange_button"
        android:text="@string/start"
        android:textColor="#ffffff"
        android:textSize="@dimen/convert_54px"
        android:gravity="center"
        android:layout_marginBottom="@dimen/convert_42px"
        app:layout_constraintBottom_toTopOf="@+id/btn_reset"/>

    <TextView
        android:id="@+id/btn_reset"
        android:layout_width="match_parent"
        android:layout_height="@dimen/convert_120px"
        android:background="@drawable/bg_white_button"
        android:text="RESET"
        android:textColor="#FFA627"
        android:textSize="@dimen/convert_54px"
        android:gravity="center"
        android:layout_marginBottom="@dimen/convert_71px"
        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>